JsPDF ne peut pas avoir de style pour fonctionner

Je suis nouveau à l'aide de jsPDF mais pour la vie de moi, je ne peux pas obtenir de css pour postuler à cette chose! J'ai essayé en ligne, interne et externe tout en rien! J'ai lu dans une autre publication SO que, car il s'agit techniquement d'imprimer des documents dans un fichier, j'ai besoin d'une feuille de style d'impression, et cela ne fonctionnait pas non plus.

J'ai une page très basique sur laquelle j'essaie d'utiliser n'importe quel CSS avec: JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jspdf.js"></script> <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> <script> $(document).ready(function(){ $('#dl').click(function(){ var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; var doc = new jsPDF('landscape'); doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); doc.output('save'); }); }); </script>

HTML:

 <body> <div id="dl">Download Maybe?</div> <div id="testcase"> <h1> We support special element handlers. Register them with jQuery-style </h1> </div> </body>

Et enfin, la feuille de style qui est externe:

 h1{ color: red; } div{ color: red; }

Je suis sûr que tout est inclus correctement, et qu'il n'y a pas d'erreurs, déjà vérifié tout cela. Existe-t-il une fonction supplémentaire que je dois appeler pour que le css fonctionne aussi? Fais-moi savoir s'il te plaît! Merci beaucoup! D'autres conseils que vous pourriez avoir sont également appréciés!

EDIT: c'est la page Web exacte:

 <html> <head> <link rel="stylesheet" href="print.css" type="text/css" media="print"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jspdf.js"></script> <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> <script> $(document).ready(function(){ $('#dl').click(function(){ var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; var doc = new jsPDF('landscape'); doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); doc.output('save'); }); }); </script> </head> <body> <div id="dl">Download Maybe?</div> <div id="testcase"> <h1> We support special element handlers. Register them with jQuery-style </h1> </div> </body> </html>

~~Je pense que le problème est que vous utilisez media="print" au lieu de media="screen" .~~ ~~Essayez de créer deux fichiers séparés, un pour l'impression et un pour l'écran:~~

 <link rel="stylesheet" href="print.css" type="text/css" media="print"/> <link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>

L'écran comprend le style de la page comme indiqué dans un navigateur. L'impression contiendra le style pour l'impression de votre page ou, dans ce cas, la sauvegarde en format PDF.

MODIFIER

J'ai vérifié le site jsPDF mais je pense qu'ils ne prennent pas en charge CSS. Vous pourriez faire quelque chose comme ça pour créer un document avec différentes couleurs de texte cependant:

 doc.setFontSize(22); doc.setTextColor(255, 0, 0); doc.text(20, 20, 'This is a title'); doc.setFontSize(16); doc.setTextColor(0, 255, 0); doc.text(20, 30, 'This is some normal sized text underneath.');

Mettez ce code directement sous var doc = new jsPDF('landscape'); Dans votre script.

Vous pouvez capturer une capture d'écran avec jsPDF, mais vous aurez besoin de html2canvas également. Utilisez html2canvas pour convertir le html en toile et saisir le contenu de l'image. Créez un pdf vide avec jsPDF et ajoutez le contenu de l'image html dans le pdf et enregistrez:

 html2canvas(*html*, { onrendered: function(canvas) { const contentDataURL = canvas.toDataURL('image/png') let pdf = new jsPDF() pdf.addImage(contentDataURL, 'JPEG', 20, 20) pdf.save('form.pdf') } })

Cela conservera tous les CSS mais la qualité en souffrira un peu (flou).