ein div mit dem Attribut "versteckt" zu pdf mit jsPDF Konvertieren und html2canvas

Question

Ich verwende jsPDF und html2canvas ein div zu pdf zu konvertieren:

<a onclick="makePdf()">PDF</a> 
<div id="divToPdf">Some content here</div> 

aber ich will nicht Mein div wird auf dem Bildschirm angezeigt. Ich habe versucht, hidden Eigenschaft mit dem div zu verstecken:

<a onclick="makePdf()">PDF</a> 
<div id="divToPdf" hidden>Some content here</div> 

Das Problem ist, dass die hidden Eigenschaft führt zu einem blank pdf Dokument. Wie kann ich das div ohne dieses Problem verstecken?

Answer 1

Sie können das Layout Ihrer Seite auf verschiedenen Medien über CSS ändern.

Dies gilt auch für das Drucken.

Sie könnten also ein dediziertes Stylesheet schreiben, das nur gültig ist, wenn Sie die Seite in PDF drucken.

haben Sie einen Blick auf:

@media print { 
    div[hidden] { 
     display: block; 
    } 
    ... 
} 

Dies sollte wählen Sie das div mit hidden Attribut und machte jene sichtbar:

@media print { 
    ... 
} 

Für Ihr Beispiel Sie einen Code wie verwenden könnte.

Wenn Sie den programmatischen Ansatz bevorzugen, dann könnten Sie alle Div auf der Seite mit Attribut hidden und entfernen Sie das Attribut, drucken Sie Ihr Dokument, als das Attribut zurück.

var hideDivs = document.querySelectorAll("div[hidden]"); 

Answer 2

So mit Mario Alexandro Santini Vorschlag des in den Kommentaren, konnte ich das Problem lösen:

Sie so etwas wie verwenden könnte. Ich benutzte jquery-unhide die div in meiner makePdf() Funktion dann verstecken es wieder nach jsPDF und html2canvas hatten ihre "Magie" getan:

function makePdf() { 
    $("#divToPdf").attr("hidden", false); 
    ... 
    $("#divToPdf").attr("hidden", true); 
} 

Danke Jungs!