取消隐藏后，html2pdf 不会打印 hidden div 吗？

Question

我正在尝试使用 html2pdf 创建 PDF。我希望 html2pdf 捕获隐藏的 div，为此，我试图在创建 PDF 时简要 "un-hide" 我的 div，然后 "re-hide" div PDF 生成后：

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();
}

取消隐藏后，html2pdf 不会打印 hidden div 吗？

html2pdf won't print hidden div after unhiding it?

javascript

pdf-generation

html2pdf

html2canvas

jspdf