Wie rendere ich CSS und Bilder in PDF mit JSPDF und Html2Canvas?

CSS und Bilder mit JSPDF rendern

Beim Exportieren von Daten in PDF mit jspdf.debug.js treten häufig Probleme beim Rendern von CSS und Bildern auf. Dieser Artikel bietet eine Lösung zur Behebung dieser Probleme.

Erstens unterstützt jspdf CSS-Rendering in exportierten PDFs nicht nativ. Um diese Einschränkung zu überwinden, wird empfohlen, Html2Canvas zu verwenden.

Um Html2Canvas zu implementieren, befolgen Sie diese Schritte:

1. Fügen Sie die JavaScript-Bibliothek Html2Canvas in Ihr Projekt ein.
2. Ersetzen Sie pdf.fromHTML() durch pdf.addHTML() in Ihrem Code. Diese Methode akzeptiert das zu konvertierende HTML-Element als ersten Parameter und eine Rückruffunktion als zweiten Parameter.

Hier ist eine aktualisierte Version Ihres Codes mit der Integration von Html2Canvas:

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

Mit Html2Canvas können Sie Webseitenelemente, einschließlich CSS-Stile und Bilder, effektiv in PDFs konvertieren.

Das obige ist der detaillierte Inhalt vonWie rendere ich CSS und Bilder in PDF mit JSPDF und Html2Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!