使用 jsPDF 和 html2canvas 将具有“隐藏”属性的 div 转换为 pdf答案

【问题标题】：Converting a div with attribute "hidden" to pdf with jsPDF and html2canvas使用 jsPDF 和 html2canvas 将具有“隐藏”属性的 div 转换为 pdf
【发布时间】：2016-10-26 02:26:42
【问题描述】：

我正在使用 jsPDF 和 html2canvas 将 div 转换为 pdf：

<a onclick="makePdf()">PDF</a>
<div id="divToPdf">Some content here</div>

但是我不希望我的div 显示在屏幕上。我尝试使用hidden 属性隐藏div：

<a onclick="makePdf()">PDF</a>
<div id="divToPdf" hidden>Some content here</div>

问题在于hidden 属性会生成空白pdf 文档。如果没有这个问题，我该如何隐藏div？

【问题讨论】：

标签： javascript jspdf html2canvas

【解决方案1】：

隐藏 HTML 标签；添加此属性标记data-html2canvas-ignore="true" 而不是hidden。

【讨论】：

【解决方案2】：

因此，根据 cmets 中 Mario Alexandro Santini 的建议，我能够解决问题。我使用 jquery 在我的makePdf() 函数中取消隐藏 div，然后在 jsPDF 之后再次隐藏和html2canvas 完成了他们的“魔法”：

function makePdf() {
    $("#divToPdf").attr("hidden", false);
    ...
    $("#divToPdf").attr("hidden", true);
}

谢谢大家！

【讨论】：

【解决方案3】：

您可以通过 css 更改页面在不同媒体上的布局。

打印也是如此。

因此您可以编写一个专用样式表，该样式表仅在您以 pdf 格式打印页面时才有效。

请看：

@media print {
   ...
}

对于您的示例，您可以使用如下代码：

@media print {
   div[hidden] {
      display: block;
   }
   ...
}

这应该选择具有hidden 属性的 div 并使它们可见。

如果您更喜欢编程方法，那么您可以使用属性hidden 获取页面中的所有 div 并删除该属性，打印您的文档，然后将属性放回原处。

你可以使用类似的东西：

var hideDivs = document.querySelectorAll("div[hidden]");

【讨论】：

我都试过了。没有工作。我实际上是将div 转换为pdf，而不是打印它。您答案中的媒体查询似乎是用于打印的。
我不知道你的makePdf()是怎么工作的，如果你使用某种lib直接将页面内容转换为pdf，那么你必须使用第二种方法：用querySelectorAll 之前调用makePdf()。
好的。凉爽的。谢谢！