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 );
})
});
21
demandé sur Alin 2014-09-20 11:14:19

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()

17
répondu Mihir 2017-08-10 07:56:53

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.

9
répondu Bhinal Chauhan 2017-03-28 08:46:34

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');
    });
})
0
répondu rajesh yadav 2018-05-10 11:19:50

pour supprimer le fond noir ajouter seulement le fond-Couleur: Blanc; au style de

-3
répondu JCristobal 2016-04-22 11:43:08