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 ?
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
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>
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>
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();
you can use absolute positioning and place your div wayyyyyy out of the screen like top: 10000000000.
then take the div away when you're done with the image / pdf !
All you need is to assign display:none;
to your element as shown below:
<div id="element-to-print" style="display:none"> </div> <button type="button" (click)="html2pdf()">Download as PDF</button>
In the context of a VueJS application, I was facing a similar situation where I wanted to only show the content when the PDF was generated.
So you can briefly 'show' the content and generate the PDF and immediately hide it.
<html2-pdf>
<section slot="pdf-content" :class="generatingPDF ? 'inline-block' : 'hidden">
// Content goes here
</section>
</html2-pdf>
In a method:
methods: {
async generatePDF(){
try {
this.generatedPDF = true
// generating PDF code here
} catch (e) {
console.log(e)
} finally {
this.generatingPDF = false
}
}
}
From what I've experienced, the user will not be 'flashed' the pdf content that should be hidden.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.