Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting a div with attribute "hidden" to pdf with jsPDF and html2canvas

I'm using jsPDF and html2canvas to convert a div to pdf:

<a onclick="makePdf()">PDF</a>
<div id="divToPdf">Some content here</div>

However I don't want my div displayed on the screen. I tried using hidden property to hide the div:

<a onclick="makePdf()">PDF</a>
<div id="divToPdf" hidden>Some content here</div>

The problem is that the hidden property results in a blank pdf document. How do I go about hiding the div without this problem?

like image 529
Nicholas Kajoh Avatar asked Jun 23 '16 16:06

Nicholas Kajoh


2 Answers

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

like image 137
Sheema Avatar answered Oct 22 '22 23:10

Sheema


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);
}

Thanks guys!

like image 37
Nicholas Kajoh Avatar answered Oct 23 '22 01:10

Nicholas Kajoh