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，并且成功了；但是，当 PDF 在消失之前生成时，我的隐藏 div 会短暂出现在屏幕上（0.5-1 秒）。我不能让这种事情发生。另外，我不太喜欢将 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();
}