L'exportation de PDF avec jspdf ne rend pas CSS
j'utilise jspdf.débogage.js pour exporter des données différentes à partir d'un site Web mais il y a quelques problèmes, Je ne peux pas l'obtenir pour rendre le CSS dans le PDF exporté et si j'ai une image dans la page que j'exporte, le PDF retourne blanc...
est ce que quelqu'un connait un moyen de résoudre ce problème ?
Voici un jsfiddle montrer qu'il n'est pas rendu le CSS
et mon script
$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
filename = 'financiar_' + d + '.pdf',
pdf = new jsPDF('p', 'pt', 'letter'),
specialElementHandlers = {
'#editor': function( element, renderer ) {
return true;
}
};
pdf.fromHTML(
$('.export').get(0) // HTML element
, 25 // x coord
, 25 // y coord
, {
'width': 550 // was 7.5, max width of content on PDF
, elementHandlers: specialElementHandlers
}
);
pdf.save( filename );
})
});
4 réponses
comme je le sais, jsPDF ne travaille pas avec CSS et le même problème que j'ai rencontré.
Pour résoudre ce problème , j'ai utilisé Html2Canvas ajouter HTML2Canvas JS puis utiliser pdf.addHTML () au lieu de pdf.fromHTML ().
Voici mon code (aucun autre code):
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});
bonne Chance!
Modifier: Consultez ici dans le cas où vous n'avez pas trouvé addHTML()
jspdf ne fonctionne pas avec css mais il peut fonctionner avec html2canvas. Vous pouvez utiliser jspdf avec html2canvas.
incluez ces deux fichiers dans script sur votre page:
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body,{
onrendered:function(canvas){
var img=canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'JPEG',20,20);
doc.save('test.pdf');
}
});
}
</script>
vous devez télécharger des fichiers de script tels que https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf
cliquez sur le bouton sur la page pour qu'il génère le pdf et qu'il soit vu comme celui du html original. page.
<a href="javascript:genPDF()">Download PDF</a>
il fonctionnera parfaitement.
Vous pouvez obtenir l'exemple de css implémenté html à la conversion pdf en utilisant jspdf sur le lien suivant: Jsfiddle Link
ceci est un exemple de code pour le téléchargement html à pdf de jspdf.
$('#print-btn').click(() => {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
})
pour supprimer le fond noir ajouter seulement le fond-Couleur: Blanc; au style de