I'm using html2pdf to generate a pdf, can I hide the html so the user doesn't see it?

Question

I'm generating vouchers using the html2pdf library.

This works fine with the voucher showing as HTML in the page.

I have a button that triggers the html2pdf() function on click, prompting the user to accept the PDF download.

I would like for the HTML to not show on the page. I tried applying position: absolute; and placing the HTML away from the user's sight. Unfortunately, the PDF then renders as blank.

Is there a way to achieve this ?

Pyrotechnics

Answer 1

Just toggle the display property of 'element-to-print' before and after the html2pdf call.

https://jsfiddle.net/bambang3128/u6o6ne41/10/

function toggleDisplay() {
  var element = document.getElementById('element-to-print');
  if (element.style.display == 'block') {
    element.style.display = 'none'
  } else {
    element.style.display = 'block'
  }

  console.log('toggleDisplay()');
}

function printPDF() {
  var element = document.getElementById('element-to-print');
  element.style.display = 'block'
  html2pdf(element);
  element.style.display = 'none'
  console.log('printPDF()');
}

<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>
<div id="element-to-print" hidden>
  <h1>This is a hidden div</h1>
  This one is hidden div contents.
</div>
<p>
  Save the hidden element as PDF.
</p>
<button type="button" onclick="toggleDisplay();">Toggle Display!</button>
<button type="button" onclick="printPDF();">Click Me!</button>

Sailfish

Answer 2

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

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

style="display: none" to div

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

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

innerHTML will do the trick

Opprobrious

This is also helpful for when you show a toast when starting the export :) – Doorknob

Works like a charm – Trunks

Answer 3

Just hide the element by using the display:none propery. The element will not appear in the downloaded pdf.

Take this example:

function download() {
var element = document.getElementById("report");
// if you want to show the element in pdf
/*
  for showing element in pdf
  var hidden = document.querySelector('.hidden');
  hidden.style.display = "block";
*/

  html2pdf(element)
}

.hidden {
  display: none;
}

<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script>
<button onclick="download()">Download PDF</button>
<div id="report">
 <div class="hidden">Hidden Element</div>
 <div>Content to be shown in PDF</div>
</div>

Favoritism

Answer 4

Instead of passing an element, simply pass the HTML as a string:

html2pdf().from("<h1>Title</h1>").save();

In my case I'm using ReactJS, so I would do:

const htmlAsString = ReactDOMServer.renderToString(<Row>
    <Col md="6">Section 1</Col>
    <Col md="6">Section 2</Col>
</Row>);

html2pdf().from(htmlAsString).save();

Discarnate

Well this totally not work if you have more than 1 line of code, and you must squeeze all of your css into the html inline. So I would say it isn't a sufficient solution. – Heartwhole

Did you try it ? I think I tried it by the time, and CSS were applied as expected. Obviously don't write your whole react element in renderToString, but break it down into small components. – Discarnate

Answer 5

In the context of a VueJS application, I was facing a similar situation where I wanted to only show the content when the PDF was generated.

So you can briefly 'show' the content and generate the PDF and immediately hide it.

<html2-pdf>
  <section slot="pdf-content" :class="generatingPDF ? 'inline-block' : 'hidden">
   // Content goes here
  </section>
</html2-pdf>

In a method:

methods: {
  async generatePDF(){
    try {
      this.generatedPDF = true
      // generating PDF code here
    } catch (e) {
      console.log(e)
    } finally {
      this.generatingPDF = false
    }
  }
}

From what I've experienced, the user will not be 'flashed' the pdf content that should be hidden.

Pastern

Answer 6

You can create a duplicate of the hidden HTML section, remove whatever class you used to hide it, and then pass it to html2pdf like this:

async function savepdf() {

  let printable = document.querySelector(".hidden") /*Get the Element from HTML DOM Tree*/;

  let emulated= document.createElement("div");
  
  emulated.innerHTML = printable.innerHTML;
  emulated.classList.remove("hidden"); /*Remove the class you declared display: none*/ 
  
  await html2pdf(emulated);
}

Hypolimnion

Answer 7

you can use absolute positioning and place your div wayyyyyy out of the screen like top: 10000000000.

then take the div away when you're done with the image / pdf !

Gunning

Html2pdf does not print divs that are not visible on Chrome. You will end up with a blank pdf. – Anchises

Answer 8

All you need is to assign display:none; to your element as shown below:

<div id="element-to-print" style="display:none">

</div>


<button type="button" (click)="html2pdf()">Download as PDF</button>

Costotomy

Html2pdf does not print hidden divs. You will end up with a blank pdf. – Anchises

Yes it does not but based on the question, he wants to hide the print area, so he needs to trigger it by setting the display to none. – Costotomy