html2pdf won't print hidden div after unhiding it?

Question

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!

Oraleeoralia

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. – Ossicle

@Ossicle I'm using CSS from my styles.css file, so I don't think there should be any overriding. – Oraleeoralia

Does your divs have an inline style of display:none or display:block? If so remove it and define your defaults thru <style> tags. – Ossicle

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. – Ossicle

Could you include a link to the html2pdf library you are using (in your question) as well as the version you are using? Thanks. – Ossicle

They do not currently @Ossicle – Oraleeoralia

Also, here's the html2pdf repo: github.com/spipu/html2pdf @Ossicle (I believe I'm using the most current version here) – Oraleeoralia

Good question Aaron Marsden. – Hispanic

Answer 1

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

Viola

Unfortunately, this still gives me a blank PDF. Pretty stuck on this one. – Oraleeoralia

Actually, I'm stupid. I was testing some "opacity: 0" CSS earlier and forgot to remove it. It actually is working now. Thank you for the help! – Oraleeoralia

This is the beeessst answer. It has saved me hours of research. Thanks as-if-i-code – Hispanic

Wish I had found this earlier. It just works! No need to create the DOM in JS or show it before putting it inside the PDF. – Osteoplastic

How to do this without jquery? – Kruter

@ToivoSäwén replace following line $(clonedElement).css("display", "block"); with clonedElement.style.display = "block";. Rest of the code is already in plain js – Viola

Answer 2

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!!

Catechumen

It saves me sleep time this night! Thank you so much! – Intersex