javascript 我正在使用 html2pdf 生成 pdf，我可以隐藏 html 以便用户看不到它吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47618250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I'm using html2pdf to generate a pdf, can I hide the html so the user doesn't see it?
提问by Brachamul
I'm generating vouchers using the html2pdflibrary.
我正在使用html2pdf库生成凭证。
This works fine with the voucher showing as HTML in the page.
这适用于在页面中显示为 HTML 的凭证。
I have a button that triggers the html2pdf()function on click, prompting the user to accept the PDF download.
我有一个按钮，html2pdf()点击时触发该功能，提示用户接受 PDF 下载。
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.
我希望 HTML 不显示在页面上。我尝试应用position: absolute;HTML 并将其放置在远离用户视线的地方。不幸的是，PDF 然后呈现为空白。
Is there a way to achieve this ?
有没有办法实现这一目标？
回答by Bambang
Just toggle the display property of 'element-to-print' before and after the html2pdf call.
只需在 html2pdf 调用之前和之后切换“元素到打印”的显示属性。
https://jsfiddle.net/bambang3128/u6o6ne41/10/
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>回答by Sidda
If you want without showing content to user to download pdf, then use innerHTML
如果您不想向用户显示内容来下载 pdf，请使用 innerHTML
<div id="exportPdf" style="display: none"></div>
style="display: none"to div
style="display: none"到 div
var source = window.document.getElementById("exportPdf").innerHTML;
html2pdf().set(opt).from(source).save();
innerHTML will do the trick
innerHTML 会解决问题
回答by Digember Dangwal
Just hide the element by using the display:nonepropery. The element will not appear in the downloaded pdf.
只需使用display:none属性隐藏元素。该元素不会出现在下载的 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>回答by Rick Penabella
you can use absolute positioning and place your div wayyyyyy out of the screen like top: 10000000000.
您可以使用绝对定位并将您的 div wayyyyyy 像 top: 10000000000 一样放在屏幕外。
then take the div away when you're done with the image / pdf !
然后在完成图像/ pdf 后将 div 拿走！
回答by Mnemo
All you need is to assign display:none;to your element as shown below:
您所需要的只是分配display:none;给您的元素，如下所示：
<div id="element-to-print" style="display:none">
</div>
<button type="button" (click)="html2pdf()">Download as PDF</button>