使用jsPDF和html2canvas將具有屬性“hidden”的div轉換為pdf

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標記; 添加此屬性標記data-html2canvas-ignore="true"而不是hidden 。

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在我的makePdf()函數中取消隱藏 div然后在jsPDF和html2canvas完成它們的“魔法”之后再次隱藏它：

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

多謝你們！