Could you please let me know how to use addHTML function in jsPDF libraries. Am trying to convert a webpage as pdf. want to use the addHTML function. Let me know what parameters need to be passed to get the entire webpage converted as pdf with header, logos, body etc
Add a comment |
2 Answers
First, you have to include jsPDF library, and also html2canvas or rasterizeHTML.
Then, just create a jsPDF object and save to pdf the entire 'body' tag (or whatever):
var pdf = new jsPDF('p','pt','a4'); pdf.addHTML(document.body,function() { pdf.save('web.pdf'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> <body> <p id="to-pdf">HTML content...</p> </body>You can find more examples on the jsPDF website: http://mrrio.github.io/jsPDF/
4 Comments
Brian Schermerhorn
is it necessary to use document.body? Why can't I use document.getElementById() or something?
Vikram Deshmukh
@BrianSchermerhorn It is not necessary to use document.body. You can pass any DOM element. Just make sure it is not the encapsulated jquery reference:
$("#target").get(0) and not $("#target")
Ananta Prasad
how to use multiple addhtml for header, body and footer ? please help me i am dying since two days..
Arun Kumar A.J
I'm using jsPDF 2.1.1 (now latest) with angular, i get valid intellisense for addHTML method, but in runtime this throws TypeError: this.pdfCreator.addHTML is not a function jsPDF.html( ) works fine, but i want to add other content after/before the html element and jsPDF.html( ) wont support that ... I would appreciate any help...
With the latest version of jsPDF, you can addHTML won't work, instead use
pdf.html(document.getElementById('gen-notes'), { callback: function (pdf) { pdf.save(); }, x: 100, // x position on the PDF document in jsPDF units. y: 100, // y position on the PDF document in jsPDF units. }); For more options refer to jsPDF docs
