{"id":2092,"date":"2022-07-06T14:01:34","date_gmt":"2022-07-06T09:01:34","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2092"},"modified":"2022-09-18T14:34:12","modified_gmt":"2022-09-18T09:34:12","slug":"jspdf-html2canvas-tutorial-convert-div-with-attribute-hidden-to-pdf-and-print-it-in-browser-using-html5-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/jspdf-html2canvas-tutorial-convert-div-with-attribute-hidden-to-pdf-and-print-it-in-browser-using-html5-javascript\/","title":{"rendered":"jsPDF Html2Canvas Tutorial: Convert Div With Attribute Hidden to PDF and Print it in Browser Using HTML5 and JavaScript"},"content":{"rendered":"\n

In this tutorial, you will learn how to use jsPDF Html2Canvas to print hidden div<\/strong>.<\/p>\n\n\n\n

To hide an HTML tag; add this attribute tag data-html2canvas-ignore=\"true\"<\/code> instead of the hidden<\/code>.<\/p>\n\n\n\n

So with Mario Alexandro Santini\u2019s<\/strong> suggestion in the comments, I was able to solve the problem. I used jquery<\/strong> to unhide the div<\/code> in my makePdf()<\/code> function then hide it again after jsPDF and html2canvas had done their \u201cmagic\u201d:<\/p>\n\n\n\n

function makePdf() {\n    $("#divToPdf").attr("hidden", false);\n    ...\n    $("#divToPdf").attr("hidden", true);\n}<\/pre><\/div>\n\n\n\n
@media print {\n   div[hidden] {\n      display: block;\n   }\n   ...\n}<\/pre><\/div>\n\n\n\n
You could change the layout of your page on different media through CSS.<\/p>\n\n\n\n
This is true for printing too.<\/p>\n\n\n\n
So you could write a dedicated stylesheet that is valid only when you print the page in pdf.<\/p>\n\n\n\n
Please have a look at:<\/p>\n\n\n\n
@media print {\n   ...\n}\n<\/pre><\/div>\n\n\n\n
For your example you could use a code like:<\/p>\n\n\n\n
@media print {\n   div[hidden] {\n      <span class="hljs-attr">display<\/span>: block;\n   }\n   ...\n}\n<\/pre><\/div>\n\n\n\n
This should select the div with hidden<\/code> attribute and made those visible.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
You could use something like:<\/p>\n\n\n\n
var hideDivs = document.querySelectorAll("div[hidden]");<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
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\u2019s suggestion in the comments, I was able to solve the problem. I used jquery to unhide the div in my makePdf() …