Comment exporter des PDF avec un rendu CSS et des images corrects à l'aide de jspdf et HTML2Canvas ?

Exportation de PDF avec le rendu CSS à l'aide de jspdf et HTML2Canvas

Problème : Lors de l'utilisation de jspdf.debug.js pour exporter données d'un site Web, les utilisateurs rencontrent des problèmes avec le CSS qui n'est pas rendu dans le PDF exporté et les images apparaissent vides.

Solution :

jspdf ne prend pas en charge le rendu CSS de manière native. . Cependant, ce problème peut être résolu en incorporant HTML2Canvas dans le processus.

HTML2Canvas vous permet de convertir des éléments HTML en éléments de canevas, qui peuvent ensuite être ajoutés au PDF à l'aide de la méthode addHTML de jspdf.

Code :

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

Implémentation :

Après avoir ajouté le HTML2Canvas JS, remplacez la méthode fromHTML de jspdf par addHTML(). Le sélecteur ElementYouWantToConvertToPdf doit pointer vers l'élément HTML que vous souhaitez exporter.

Remarque : Si vous ne trouvez pas la méthode addHTML(), reportez-vous à la documentation pour plus de précisions.

Considérations supplémentaires :

• N'oubliez pas d'ajouter le script HTML2Canvas à votre fichier HTML.
• Assurez-vous que les dimensions du PDF et la largeur de l'élément sont définies de manière appropriée. pour éviter les coupures.
• Testez minutieusement votre code pour vous assurer qu'il répond à vos exigences.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!