Generate pdf from HTML in div using Javascript

Question

I have the following HTML code:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

All I want to do is print to pdf everything found in the div with the id "pdf."

This must be accomplished with JavaScript.

The "pdf" document should then be downloaded automatically with the filename "foobar.pdf."

I've been using jspdf for this, however, its only function is "text," which only accepts string data.

I want to send HTML to jspdf rather than text.

Damonlang · Answer 1 · Dec 10, 2022

If you wish to ignore particular elements, you must assign them an ID, which you may subsequently ignore in a jsPDF special element handler. As a result, your HTML should look like this:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

Then you use the JavaScript code below to open the produced PDF in a PopUp:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

This produced a neat and tidy PDF with simply the line 'print this to pdf'.