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

Posted 2023-02-24

【中文标题】html2pdf取消隐藏后不会打印隐藏的div？

【英文标题】：html2pdf won't print hidden div after unhiding it?

【发布时间】：2020-06-18 18:41:39

【问题描述】：

我正在尝试使用 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 放在远离视口的地方以弥补隐藏问题，因为我听说这种方法与某些浏览器有冲突。

关于如何解决此问题的任何想法？非常感谢任何帮助。谢谢！

【问题讨论】：

您是在 div 上使用内联样式还是 css 样式规则，还是两者都使用？通常 css 样式不能覆盖内联样式，因为后者是“级联”链中最重要的因素。

@GetSet 我正在使用我的 styles.css 文件中的 CSS，所以我认为不应该有任何覆盖。

您的divs 是否具有display:none 或display:block 的内联样式？如果是这样，请将其删除并通过 <style> 标签定义您的默认值。

万一，当您更改样式然后调用 pdf lib 时，DOM 没有完全重新渲染？稍后我将在您对我最后一个问题/疑虑的回答中解决这个问题。为您投票，因为可能其他人可以立即解决这个好问题。

您能否包含指向您正在使用的 html2pdf 库的链接（在您的问题中）以及您正在使用的版本？谢谢。

【参考方案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();

【讨论】：

不幸的是，这仍然给了我一个空白的 PDF。很坚持这个。

其实我很傻。我之前正在测试一些“不透明度：0”CSS，但忘记删除它。它现在实际上正在工作。感谢您的帮助！

这是最好的答案。它为我节省了数小时的研究时间。谢谢as-if-i-code