How to generate PDF using jsPDF and canvas?
Question
I'm tryin to generate an entire html page into pdf using canvas2image, then prepare it for download. but sadly, That ain't working at all:(( if you have any information of what am I doin wrong, please do share away. here is my code:
function genPDF() { html2canvas(document.body, { onrendered: function(canvas) { var img = canvas.toDataURL("image/png"); var doc = new jsPDF(); doc.addImage(img, 'JPEG', 20, 20); doc.save('test.pdf'); } }); }
<!DOCTYPE> <html> <head> <title>jsPDF</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> </head> <body> <h1>jsPDF Demos</h1> <a href="javascript:genPDF()">Download PDF</a> <div id="testDiv"> <h1>Example Header </h1> <input type="text" /> <input type="submit" value="button" /> <br><br> <img src="test.jpg" width="600" height="400" /> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2019-08-24 20:00:48
function genPDF() { var dom = document.getElementById('testDiv'); html2canvas(dom).then(function(canvas) { var img = canvas.toDataURL("image/png"); var doc = new jsPDF(); doc.addImage(img, 'JPEG', 20, 20); doc.save('test.pdf'); }); }
<!DOCTYPE> <html> <head> <title>jsPDF</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> </head> <body> <h1>jsPDF Demos</h1> <a href="javascript:genPDF()">Download PDF</a> <div id="testDiv"> <h1>Example Header </h1> <input type="text" /> <input type="submit" value="button" /> <br><br> <img src="https://i.stack.imgur.com/Zgrsf.png?s=328&g=1" width="600" height="400" /> </div> </body> </html>
Reference: https://html2canvas.hertzen.com
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to generate pdf using javascript libraries other than jspdf, html2pdf, pdfmaker, html2canvas?
How to generate full pdf using jspdf?
Converting Canvas to Pdf using JsPDF
JsPDF canvas to pdf speed the generate speed
How to print PDF with number page same number canvas using jsPDF?
How can I generate pdf from svg using jspdf in reactjs
Export Canvas Chart to PDF using JSPDF
Generate PDF on client side using JSPDF
PDF of a generate div via jquery, using jsPDF
Generate High Quality PDF with Javascript (jspdf+html2canvas)
Related Tags