html2pdf не будет печатать скрытый div после его скрытия?

Question

Я пытаюсь создать PDF с html2pdf. Я хочу, чтобы html2pdf захватил скрытый элемент div, и для этого я пытаюсь кратко «убрать» мой div во время создания PDF, а затем «скрыть» div после создания PDF:

function generatePDF() {
    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");
    // Display the PDF div
    $(element).css("display", "block");
    // Choose the element and save the PDF for our user.
    html2pdf(element);
    //Hide the PDF div
    $(element).css("display", "none");
}

Но когда распечатывается PDF, моего div там нет. Я полагаю, что я попытался повторно скрыть div с помощью функции обратного вызова, предоставленной html2pdf, и это сработало; Тем не менее, мой скрытый div будет отображаться на экране ненадолго (0,5-1 секунды), пока PDF-файл генерируется до исчезновения. Я не могу этого допустить. Кроме того, я не очень люблю размещать div далеко от области просмотра, чтобы компенсировать скрытую проблему, поскольку я слышал, что этот метод конфликтует с некоторыми браузерами.

Любые идеи о том, как я могу быть в состоянии это исправить? Любая помощь очень ценится. Спасибо!

Answer 1

Вы можете использовать cloneNode для создания клона элемента и использовать его для создания PDF. Этот клонированный элемент не будет виден, пока вы не добавите его в документ.

Ниже код создаст клон вашего элемента, изменит его свойство display, затем использует этот клонированный элемент для создания pdf и, наконец, удалит этот клонированный элемент. .

function generatePDF() {

    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");

    // clone the element
    var clonedElement = element.cloneNode(true);

    // change display of cloned element 
    $(clonedElement).css("display", "block");

    // Choose the clonedElement and save the PDF for our user.
    html2pdf(clonedElement);

    // remove cloned element
    clonedElement.remove();
}