23

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

L84
  • 45,514
  • 58
  • 177
  • 257
Shireesh
  • 263
  • 1
  • 2
  • 9

1 Answers1

34

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/

gonzaloriestra
  • 713
  • 6
  • 15
  • 3
    is it necessary to use document.body? Why can't I use document.getElementById() or something? – Brian Schermerhorn May 04 '15 at 13:50
  • 3
    @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")` – Vikram Deshmukh Oct 23 '15 at 13:10
  • how to use multiple addhtml for header, body and footer ? please help me i am dying since two days.. – Ananta Prasad Jan 14 '16 at 12:15
  • 2
    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... – Arun Kumar A.J Nov 22 '20 at 07:36