html2pdf取消隐藏后不会打印隐藏的div？

Question

我正在尝试使用 html2pdf 创建 PDF。我希望 html2pdf 捕获隐藏的 div，为此，我尝试在创建 PDF 时短暂“取消隐藏”我的 div，然后在生成 PDF 后“重新隐藏”div：

function generatePDF() {
    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");
    // Display the PDF div
    $(element).css("display", "block");
    // Choose the element and save the PDF for our user.
    html2pdf(element);
    //Hide the PDF div
    $(element).css("display", "none");
}

但是当 PDF 打印时，我的 div 不在那里。我相信我曾经尝试使用 html2pdf 提供的回调函数重新隐藏 div，并且它有效；但是，我隐藏的 div 会短暂出现在屏幕上（0.5-1 秒），而 PDF 会在消失之前生成。我不能让这种事发生。另外，我不太喜欢将 div 放置在远离视口的地方来补偿隐藏问题，因为我听说这种方法与某些浏览器发生冲突。

我有什么办法可以解决这个问题吗？非常感谢任何帮助。谢谢！

Answer 1

您可以使用

cloneNode

创建元素的克隆并将其用于 PDF 创建。除非您将其附加到文档，否则该克隆元素将不可见。

下面的代码将创建元素的克隆，更改其显示属性，然后使用此克隆元素创建 pdf，最后删除此克隆元素。

function generatePDF() {

    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");

    // clone the element
    var clonedElement = element.cloneNode(true);

    // change display of cloned element 
    $(clonedElement).css("display", "block");

    // Choose the clonedElement and save the PDF for our user.
    html2pdf(clonedElement);

    // remove cloned element
    clonedElement.remove();
}

Answer 2

如果您想在不向用户显示内容的情况下下载 pdf，请使用 innerHTML

<div id="nodeToRenderAsPDF" style="display: none"></div>

innerHTML 就可以了！！

var source = window.document.getElementById("exportPdf").innerHTML;

html2pdf().set(opt).from(source).save();

进一步参考：看看这个！！