web-dev-qa-db-fra.com

Exportation PDF avec jspdf ne rendant pas CSS

J'utilise jspdf.debug.js pour exporter différentes données d'un site Web, mais il y a quelques problèmes. Je n'arrive pas à obtenir le rendu du code CSS dans le fichier exporté PDF et si j'ai une image dans le fichier. page que j'exporte, le PDF renvoie un blanc ...

Est-ce que quelqu'un sait un moyen de résoudre ce problème?

Voici un jsfiddle montrant qu'il ne rend pas 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 );
})
});
jquerycssrenderingjspdf
22
Alin

Comme je sais, jsPDF ne fonctionne pas avec CSS et le même problème que je rencontrais.

Pour résoudre ce problème, j'ai utilisé Html2Canvas So just Add HTML2Canvas JS, puis pdf.addHTML () au lieu de pdf.fromHTML ().

Voici mon code (pas d'autre code):

 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });

Bonne chance!

Edit: Référez-vous ici au cas où vous n’auriez pas trouvé addHTML ()

20
Mihir

jspdf ne fonctionne pas avec css mais peut fonctionner avec html2canvas. Vous pouvez utiliser jspdf avec html2canvas.

inclure ces deux fichiers dans le 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/releaseshttps://cdnjs.com/libraries/jspdf

rendre le bouton cliquable sur la page afin qu'il génère un fichier PDF et qu'il soit identique à celui de la page html d'origine.

<a href="javascript:genPDF()">Download PDF</a>

Cela fonctionnera parfaitement. 

10
Bhinal Chauhan

Vous pouvez obtenir l’exemple de conversion html en pdf implémentée par css en utilisant jspdf sur le lien suivant: JSFiddle Link

Ceci est un exemple de code pour le téléchargement jspdf html en pdf.

$('#print-btn').click(() => {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() {
        pdf.save('web.pdf');
    });
})
0
rajesh yadav