使用jsPDF和html2canvas

Question

我正在使用 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？

Answer 1

隐藏HTML标签；添加此属性，以代替hidden标签data-html2canvas-ignore="true"。

Answer 2

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

印刷也是如此。

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

请看一下：

@media print {
   ...
}

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

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

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

如果您喜欢编程方法，那么您可以使用属性hidden获取页面中的所有div并删除属性，打印文档，而不是将属性放回去。

您可以使用以下内容：

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

Answer 3

因此，在评论中提及 Mario Alexandro Santini的建议时，我能够解决问题。我使用 jquery 来取消隐藏 div函数中的makePdf()，然后 jsPDF <隐藏 / strong>和 html2canvas 已经完成了他们的“魔术”：

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

谢谢你们！