6

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!

Aaron Marsden
  • 345
  • 3
  • 12
  • 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 Mar 06 '20 at 03:47
  • @GetSet I'm using CSS from my styles.css file, so I don't think there should be any overriding. – Aaron Marsden Mar 06 '20 at 03:57
  • Does your `div`s have an inline style of `display:none` or `display:block`? If so remove it and define your defaults thru ` – GetSet Mar 06 '20 at 04: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 Mar 06 '20 at 04: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 Mar 06 '20 at 04:19
  • They do not currently @GetSet – Aaron Marsden Mar 06 '20 at 05:09
  • Also, here's the html2pdf repo: https://github.com/spipu/html2pdf @GetSet (I believe I'm using the most current version here) – Aaron Marsden Mar 06 '20 at 05:10
  • Good question [Aaron Marsden](https://stackoverflow.com/users/8895438/aaron-marsden). – Nelson Katale Oct 21 '21 at 07:59

1 Answers1

15

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();
}
as-if-i-code
  • 2,103
  • 1
  • 10
  • 19