I'm trying to create a PDF with html2pdf. I want html2pdf to capture a div that's hidden, and to do this, I'm attempting to briefly "un-hide" my div while the PDF is creating, then "re-hide" the div once the PDF has generated:

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");
}

But when the PDF prints, my div is not there. I believe I tried re-hiding the div with a callback function provided by html2pdf at one point, and it worked; however, my hidden div would appear on the screen briefly (0.5-1 second) while the PDF generated before disappearing. I can't have that happen. Also, I'm not much of a fan of placing the div far out of the viewport to compensate for the hiding issue as I've heard this method conflicts with some browsers.

Any ideas for how I may be able to fix this? Any help is extremely appreciated. Thanks!

I'm trying to create a PDF with html2pdf. I want html2pdf to capture a div that's hidden, and to do this, I'm attempting to briefly "un-hide" my div while the PDF is creating, then "re-hide" the div once the PDF has generated:

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");
}

But when the PDF prints, my div is not there. I believe I tried re-hiding the div with a callback function provided by html2pdf at one point, and it worked; however, my hidden div would appear on the screen briefly (0.5-1 second) while the PDF generated before disappearing. I can't have that happen. Also, I'm not much of a fan of placing the div far out of the viewport to compensate for the hiding issue as I've heard this method conflicts with some browsers.

Any ideas for how I may be able to fix this? Any help is extremely appreciated. Thanks!

• javascript
• pdf-generation
• jspdf
• html2canvas
• html2pdf

• Are you using inline styles or css style rules on the div or both? Generally css styles cannot override an inline style, as the latter is the overriding factor in the "cascading" chain. – GetSet Commented Mar 6, 2020 at 3:47
• @GetSet I'm using CSS from my styles.css file, so I don't think there should be any overriding. – Aaron Marsden Commented Mar 6, 2020 at 3:57
• Does your divs have an inline style of display:none or display:block? If so remove it and define your defaults thru <style> tags. – GetSet Commented Mar 6, 2020 at 4:07
• In the off chance, the DOM is not fully re-rendered when you change styles and then call the pdf lib? I will address this later on your answer to my last question/concern. Upvoted you because possibly someone else has an immediate to solution to this good question. – GetSet Commented Mar 6, 2020 at 4:13
• Could you include a link to the html2pdf library you are using (in your question) as well as the version you are using? Thanks. – GetSet Commented Mar 6, 2020 at 4:19

2 Answers 2

You can use cloneNode to create clone of element and use it for PDF creation. This cloned element will not be visible unless you append it to document.

Below code will create a clone of your element, change it's display property, then use this cloned element to create pdf, and finally remove this cloned element.

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();
}

If you want without showing content to user to download pdf, then use innerHTML

<div id="nodeToRenderAsPDF" style="display: none"></div>

innerHTML will do the trick!!

var source = window.document.getElementById("exportPdf").innerHTML;

html2pdf().set(opt).from(source).save();

for further reference: check this out!!