[英]I'm using html2pdf to generate a pdf, can I hide the html so the user doesn't see it?
我正在使用html2pdf库生成凭证。
这适用于在页面中显示为 HTML 的凭证。
我有一个按钮,点击时触发html2pdf()
函数,提示用户接受 PDF 下载。
我希望 HTML 不显示在页面上。 我试过申请position: absolute;
并将 HTML 放置在远离用户视线的地方。 不幸的是,PDF 然后呈现为空白。
有没有办法实现这一目标?
如果您不想向用户显示内容来下载 pdf,请使用 innerHTML
<div id="exportPdf" style="display: none"></div>
style="display: none"
到 div
var source = window.document.getElementById("exportPdf").innerHTML;
html2pdf().set(opt).from(source).save();
innerHTML 会解决问题
只需在 html2pdf 调用之前和之后切换“元素到打印”的显示属性。
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>
只需使用display:none属性隐藏元素。 该元素不会出现在下载的 pdf 中。
拿这个例子:
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>
不传递元素,只需将 HTML 作为字符串传递:
html2pdf().from("<h1>Title</h1>").save();
就我而言,我使用的是 ReactJS,所以我会这样做:
const htmlAsString = ReactDOMServer.renderToString(<Row>
<Col md="6">Section 1</Col>
<Col md="6">Section 2</Col>
</Row>);
html2pdf().from(htmlAsString).save();
您可以使用绝对定位并将您的 div wayyyyyy 像 top: 10000000000 一样放在屏幕外。
然后在完成图像/ pdf 后将 div 拿走!
您只需要分配display:none;
到您的元素,如下所示:
<div id="element-to-print" style="display:none"> </div> <button type="button" (click)="html2pdf()">Download as PDF</button>
在 VueJS 应用程序的上下文中,我面临着类似的情况,我只想在生成 PDF 时显示内容。
因此,您可以简单地“显示”内容并生成 PDF 并立即将其隐藏。
<html2-pdf>
<section slot="pdf-content" :class="generatingPDF ? 'inline-block' : 'hidden">
// Content goes here
</section>
</html2-pdf>
在一个方法中:
methods: {
async generatePDF(){
try {
this.generatedPDF = true
// generating PDF code here
} catch (e) {
console.log(e)
} finally {
this.generatingPDF = false
}
}
}
根据我的经验,用户不会“闪现”应该隐藏的 pdf 内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.