web-dev-qa-db-fra.com

jsPDF ne peut utiliser aucun style

Je suis novice dans l'utilisation de jsPDF, mais je ne parviens pas à appliquer un seul css à cette chose! J'ai essayé inline, internal et external en vain! J'ai lu dans un autre SO message que, puisqu'il s'agit techniquement d'imprimer des éléments dans un fichier, j'ai besoin d'une feuille de style d'impression, ce qui n'a pas fonctionné non plus.

J'ai une page très basique avec laquelle j'essaie juste de faire travailler 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 correctement inclus, et qu'il n'y a pas d'erreur, déjà vérifié tout cela. Existe-t-il une fonction supplémentaire à appeler pour que le fichier css fonctionne également? Fais-moi savoir s'il te plaît! Merci beaucoup! Tous les 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>
javascriptcsspdf-generationjspdf
35
samuraiseoul

Je pense que le problème est que vous utilisez media="print" au lieu de media="screen". Essayez de créer deux fichiers distincts, 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 1 contiendra le style de la page tel qu’il apparaît dans un navigateur. Celui qui sera imprimé contiendra le style pour quand vous imprimez votre page ou, dans ce cas, l'enregistrez au format PDF. </ Strike>

MODIFIER

J'ai consulté le site jsPDF mais je pense qu’ils ne supportent pas les CSS. Vous pouvez faire quelque chose comme ceci pour créer un document avec des couleurs de texte différentes:

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.

21
Jarno

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

de son fichier README:

inclure ces fichiers:

<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 lançant:

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' }
});
1
drizzt13

@samuraiseoul Nous pouvons faire un rendu HTML complexe avec domtoimage

private async generatePDF(elemToPrint: HTMLElement): Promise<void> {
 this.printSection = document.createElement('div');
 this.printSection.id = 'printSection';
 document.body.appendChild(this.printSection);
 const dataUrl = await domtoimage.toPng(elemToPrint, {width: elemToPrint.clientWidth, height: elemToPrint.clientHeight});
 const img = document.createElement('img');
 img.src = dataUrl;
 img.alt = 'The Image';
 this.printSection.appendChild(img);
 setTimeout(() => window.print(), 500); //Just give some time to render stuff while playing with @media print css stuff  
}

Voici avec le CSS

@media screen {
 #printSection { 
  display: none;
 }
}
@media print {
  #printSection , #printSection *{
   display: block; // We need the * because only if we display all the items inside the printSection to display as block. then only our mighty firefox will render the second page. :) Hey, that's a bug from FF.
  }
}
0
Fasid Mpm

Vous pouvez capturer une capture d'écran avec jsPDF, mais vous aurez également besoin de html2canvas. Utilisez html2canvas pour convertir le code HTML en canevas et récupérer 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 (floue).

0
flashmatrix