I'm using html2pdf to generate a pdf, can I hide the html so the user doesn't see it?
Solution 1
Just toggle the display property of 'element-to-print' before and after the html2pdf call.
https://jsfiddle.net/bambang3128/u6o6ne41/10/
function toggleDisplay() {
var element = document.getElementById('element-to-print');
if (element.style.display == 'block') {
element.style.display = 'none'
} else {
element.style.display = 'block'
}
console.log('toggleDisplay()');
}
function printPDF() {
var element = document.getElementById('element-to-print');
element.style.display = 'block'
html2pdf(element);
element.style.display = 'none'
console.log('printPDF()');
}
<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>
<div id="element-to-print" hidden>
<h1>This is a hidden div</h1>
This one is hidden div contents.
</div>
<p>
Save the hidden element as PDF.
</p>
<button type="button" onclick="toggleDisplay();">Toggle Display!</button>
<button type="button" onclick="printPDF();">Click Me!</button>
Solution 2
If you want without showing content to user to download pdf, then use innerHTML
<div id="exportPdf" style="display: none"></div>
style="display: none"
to div
var source = window.document.getElementById("exportPdf").innerHTML;
html2pdf().set(opt).from(source).save();
innerHTML will do the trick
Solution 3
Just hide the element by using the display:none propery. The element will not appear in the downloaded pdf.
Take this example:
function download() {
var element = document.getElementById("report");
// if you want to show the element in pdf
/*
for showing element in pdf
var hidden = document.querySelector('.hidden');
hidden.style.display = "block";
*/
html2pdf(element)
}
.hidden {
display: none;
}
<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>
<button onclick="download()">Download PDF</button>
<div id="report">
<div class="hidden">Hidden Element</div>
<div>Content to be shown in PDF</div>
</div>
Solution 4
Instead of passing an element, simply pass the HTML as a string:
html2pdf().from("<h1>Title</h1>").save();
In my case I'm using ReactJS, so I would do:
const htmlAsString = ReactDOMServer.renderToString(<Row>
<Col md="6">Section 1</Col>
<Col md="6">Section 2</Col>
</Row>);
html2pdf().from(htmlAsString).save();
Related videos on Youtube
Brachamul
Updated on August 08, 2021Comments
-
Brachamul over 2 years
I'm generating vouchers using the html2pdf library.
This works fine with the voucher showing as HTML in the page.
I have a button that triggers the
html2pdf()
function on click, prompting the user to accept the PDF download.I would like for the HTML to not show on the page. I tried applying
position: absolute;
and placing the HTML away from the user's sight. Unfortunately, the PDF then renders as blank.Is there a way to achieve this ?
-
Josh C over 5 yearsHtml2pdf does not print hidden divs. You will end up with a blank pdf.
-
Josh C over 5 yearsHtml2pdf does not print divs that are not visible on Chrome. You will end up with a blank pdf.
-
Mnemo over 5 yearsYes it does not but based on the question, he wants to hide the print area, so he needs to trigger it by setting the display to none.
-
Finlay Roelofs over 4 yearsThis is also helpful for when you show a toast when starting the export :)
-
Albert Alberto over 3 yearsWorks like a charm
-
Dgloria almost 3 yearsWell this totally not work if you have more than 1 line of code, and you must squeeze all of your css into the html inline. So I would say it isn't a sufficient solution.
-
Maxime Lechevallier almost 3 yearsDid you try it ? I think I tried it by the time, and CSS were applied as expected. Obviously don't write your whole react element in renderToString, but break it down into small components.