jsPDF Html2Canvas Tutorial: Convert Div With Attribute Hidden to PDF and Print it in Browser Using HTML5 and JavaScript

In this tutorial, you will learn how to use jsPDF Html2Canvas to print hidden div.

To hide an HTML tag; add this attribute tag data-html2canvas-ignore="true" instead of the hidden.

So with Mario Alexandro Santini’s suggestion in the comments, I was able to solve the problem. I used jquery to unhide the div in my makePdf() function then hide it again after jsPDF and html2canvas had done their “magic”:

function makePdf() {
    $("#divToPdf").attr("hidden", false);
    ...
    $("#divToPdf").attr("hidden", true);
}

@media print {
   div[hidden] {
      display: block;
   }
   ...
}

You could change the layout of your page on different media through CSS.

This is true for printing too.

So you could write a dedicated stylesheet that is valid only when you print the page in pdf.

Please have a look at:

@media print {
   ...
}

For your example you could use a code like:

@media print {
   div[hidden] {
      <span class="hljs-attr">display</span>: block;
   }
   ...
}

This should select the div with hidden attribute and made those visible.

If you prefer the programmatic approach then you could get all div in the page with attribute hidden and remove the attribute, print your document, then put the attribute back.

You could use something like:

var hideDivs = document.querySelectorAll("div[hidden]");