使用jsPDF和html2canvas将带有"hidden"属性的div转换为pdf

Question

我正在使用 jsPDF 和 html2canvas 将一个 div 转换成 pdf：

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

然而，我不想让我的

显示在屏幕上。我尝试使用hidden属性来隐藏

:

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

问题在于使用 hidden 属性会导致生成一个空白的 PDF 文档。那么我应该如何隐藏 div 且不出现这个问题呢？

- Nicholas Kajoh

Answer 1

隐藏 HTML 标签，请将此属性标签 data-html2canvas-ignore="true" 添加到标签中，而不是使用 hidden 属性。

- Sheema

Answer 2

有评论中Mario Alexandro Santini的建议，我解决了问题。我在我的makePdf()函数中使用了jquery来显示div，然后在jsPDF和html2canvas完成其“魔术”后再次隐藏它：

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

谢谢大家！

- Nicholas Kajoh

Answer 3

你可以通过CSS在不同的媒体上改变页面的布局。

打印也是如此。

因此，你可以编写一个专门的样式表，仅在将页面打印为PDF时有效。

请参考：

@media print {
   ...
}

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

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

这应该选择带有 hidden 属性的 div 并将其显示出来。

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

您可以使用类似以下的代码：

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

- Mario Santini

---

我尝试了两种方法，但都没有成功。实际上，我是将div转换为PDF而不是打印它。你回答中的媒体查询似乎是用于打印的。 - Nicholas Kajoh

我不知道你的 makePdf() 如何工作的，如果你使用某种库直接将页面内容转换为 pdf，则必须使用第二种方法：在调用 makePdf() 之前使用 querySelectorAll 更改页面。 - Mario Santini

好的。太酷了。谢谢！ - Nicholas Kajoh