Ich benutze html2pdf, um ein PDF zu generieren, kann ich das HTML verstecken, so dass der Benutzer es nicht sieht?

Question

Ich erzeuge Gutscheine mit der html2pdf Bibliothek.

Dies funktioniert gut mit dem Gutschein als HTML auf der Seite angezeigt.

Ich habe eine Schaltfläche, die die Funktion html2pdf() bei Klick auslöst und den Benutzer auffordert, den PDF-Download zu akzeptieren.

Ich möchte für das HTML nicht auf der Seite angezeigt werden. Ich habe versucht, position: absolute; anzuwenden und den HTML-Code aus Sicht des Benutzers zu entfernen. Leider wird das PDF dann als leer gerendert.

Gibt es einen Weg, dies zu erreichen?

Answer 1

Schalten Sie einfach die Anzeigeeigenschaft von 'Element-to-Print' vor und nach dem Aufruf von html2pdf um.

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>

Answer 2

können Sie die absolute Positionierung verwenden und platzieren Sie Ihre div wayyyyyy aus dem Bildschirm wie oben: 10000000000.

dann die div wegzunehmen, wenn Sie sind fertig mit dem image/pdf!

Answer 3

Alles, was Sie brauchen, ist display:none; zu Ihrem Element zuweisen, wie unten dargestellt:

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

 
</div> 
 

 

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