Преобразование DIV с атрибутом "скрытый" в формате PDF с 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

Вы можете изменить расположение своей страницы на разных носителях через css.

Это верно и для печати.

Итак, вы можете написать специальную таблицу стилей, которая действительна только при печати страницы в формате pdf.

Пожалуйста, обратите внимание на:

@media print { 
    ... 
} 

Для примера можно использовать такой код:

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

этого следует выбрать DIV с hidden атрибутом и сделал видимые.

Если вы предпочитаете программный подход, вы можете получить все div на странице с атрибутом hidden и удалить атрибут, распечатать свой документ, чем вернуть атрибут.

Вы могли бы использовать что-то вроде:

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

Answer 2

Так с предложением Марио Alexandro Сантини в комментариях, я был в состоянии решить эту проблему. Я использовал JQuery к UNHIDEdiv в моей makePdf() функции, то скрыть снова после jsPDF и html2canvas сделали свое "волшебство":

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

Спасибо, ребята!