Comment restituer du CSS et des images dans un PDF à l'aide de JSPDF et Html2Canvas ?

Rendu du CSS et des images avec JSPDF

Lors de l'exportation de données au format PDF à l'aide de jspdf.debug.js, il est courant de rencontrer des problèmes de rendu du CSS et des images. Cet article propose une solution pour résoudre ces problèmes.

Premièrement, jspdf ne prend pas en charge nativement le rendu CSS dans les PDF exportés. Pour surmonter cette limitation, il est recommandé d'utiliser Html2Canvas.

Pour implémenter Html2Canvas, suivez ces étapes :

1. Incluez la bibliothèque JavaScript Html2Canvas dans votre projet.
2. Remplacez pdf.fromHTML() par pdf.addHTML() dans votre code. Cette méthode accepte l'élément HTML à convertir comme premier paramètre et une fonction de rappel comme deuxième paramètre.

Voici une version mise à jour de votre code avec l'intégration de Html2Canvas :

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

En utilisant Html2Canvas, vous pouvez convertir efficacement des éléments de page Web, y compris des styles et des images CSS, en PDF.

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!