Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsPDF: View Content Of PDF

I got a new PDF generator using just javascript and no server codes implemented. But when I always try to run the code the file always automatically save or download so there are no chance for me to review or view the content. How can I view the content of my PDF when I am usingg jsPDF?

var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);

var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);

for(var i = 1; i <= 12; i ++) {
    doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);

for(var i = 1; i <= 12; i ++) {
    doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}
doc.save('Test.pdf');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
like image 219
Ailyn Avatar asked Dec 24 '22 16:12

Ailyn


2 Answers

window.open(doc.output('bloburl'), '_blank');
like image 191
Yevhenii Bahmutskyi Avatar answered Dec 29 '22 07:12

Yevhenii Bahmutskyi


Although window.open works fine, for security reasons new chrome versions are blocking by default the popup and hence I've needed another solution.

Inspired by the page of: https://parall.ax/products/jspdf I've concluded to the below solution:

HTML code (for full size iframe on the screen):

 <iframe id="main-iframe" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; border: none;"></iframe>

JavaScript code:

 document.getElementById('main-iframe').setAttribute('src', doc.output('bloburl'));
like image 22
John Skoumbourdis Avatar answered Dec 29 '22 06:12

John Skoumbourdis