我正在使用 html2pdf 生成 pdf，我可以隐藏 html 以便用户看不到它吗？

Question

我正在使用html2pdf库生成凭证。

这适用于在页面中显示为 HTML 的凭证。

我有一个按钮，html2pdf()点击时触发该功能，提示用户接受 PDF 下载。

我希望 HTML 不显示在页面上。我尝试应用position: absolute;HTML 并将其放置在远离用户视线的地方。不幸的是，PDF 然后呈现为空白。

有没有办法实现这一目标？

Answer 1

如果您不想向用户显示内容来下载 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 会解决问题

Answer 2

只需在 html2pdf 调用之前和之后切换 'element-to-print' 的显示属性。

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>