jsPDF ne peut pas avoir de style pour fonctionner

je suis nouveau à utiliser jsPDF mais et pour la vie de moi Je ne peux obtenir aucun css à appliquer à cette chose! J'ai essayé en ligne, interne et externe en vain! J'ai lu dans un autre SO post que puisque c'est techniquement imprimer des trucs dans un fichier, j'ai besoin d'une feuille de style d'impression, et ça n'a pas marché non plus.

j'ai une page très basique que j'essaie juste de faire fonctionner n'importe quel CSS: 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 arriver inclus correctement, et qu'il n'y a pas d'erreurs, déjà vérifié tout ça. Y a-t-il une fonction supplémentaire que je dois appeler pour faire fonctionner le css? Laissez-moi savoir s'il vous plaît! Merci beaucoup! Tous les autres conseils que vous pouvez 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>
34
demandé sur samuraiseoul 2013-12-09 02:31:37

3 réponses

je pense que le problème est que vous utilisez media="print" au lieu de media="screen" . Essayez de faire 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 un contiendra le style de la page comme vu dans un navigateur. La version print one contiendra le style pour l'impression de votre page, ou dans ce cas la sauvegarde en PDF.

MODIFIER

I j'ai vérifié le site jspdf mais je pense qu'ils ne supportent pas CSS. Vous pouvez faire quelque chose comme cela pour créer un document avec des couleurs de texte différentes 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 juste sous var doc = new jsPDF('landscape'); dans votre script.

20
répondu Jarno 2017-03-08 05:52:03

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

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 retiendra tout CSS mais la qualité souffrira un peu (flou).

0
répondu flashmatrix 2016-10-31 18:00:30

vous pouvez essayer cette option, qui utilise les bibliothèques jsPDF, html2canvas et html2pdf

d'après son README:

inclure les fichiers suivants: 

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>

et ensuite vous pouvez générer votre pdf en exécutant: 

html2pdf($('body').get(0), {
   margin:       1,
   filename:     'myfile.pdf',
   image:        { type: 'jpeg', quality: 0.98 },
   html2canvas:  { dpi: 192, letterRendering: true },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
});
0
répondu drizzt13 2017-10-03 12:05:12