Wie exportiere ich PDFs mit korrekter CSS-Wiedergabe und Bildern mit jspdf und HTML2Canvas?

PDFs mit CSS-Rendering mit jspdf und HTML2Canvas exportieren

Problem:Bei Verwendung von jspdf.debug.js zum Exportieren Bei der Verarbeitung von Daten von einer Website treten bei Benutzern Probleme auf, da CSS in der exportierten PDF-Datei nicht gerendert wird und Bilder leer angezeigt werden.

Lösung:

jspdf unterstützt CSS-Rendering nicht nativ . Dies kann jedoch durch die Einbindung von HTML2Canvas in den Prozess gelöst werden.

Mit HTML2Canvas können Sie HTML-Elemente in Canvas-Elemente konvertieren, die dann mit der addHTML-Methode von jspdf zum PDF hinzugefügt werden können.

Code:

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function() {
    pdf.save('Test.pdf');
});

Implementierung:

Ersetzen Sie nach dem Hinzufügen des HTML2Canvas JS die fromHTML-Methode von jspdf durch addHTML(). Der ElementYouWantToConvertToPdf-Selektor sollte auf das HTML-Element verweisen, das Sie exportieren möchten.

Hinweis: Wenn Sie die Methode addHTML() nicht finden, lesen Sie zur weiteren Erläuterung die Dokumentation.

Zusätzliche Überlegungen:

• Denken Sie daran, das HTML2Canvas-Skript zu Ihrer HTML-Datei hinzuzufügen.
• Stellen Sie sicher, dass die PDF-Abmessungen und die Elementbreite entsprechend eingestellt sind um Unterbrechungen zu vermeiden.
• Testen Sie Ihren Code gründlich, um sicherzustellen, dass er Ihren Anforderungen entspricht.

Das obige ist der detaillierte Inhalt vonWie exportiere ich PDFs mit korrekter CSS-Wiedergabe und Bildern mit jspdf und HTML2Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!