web-dev-qa-db-de.com

Exportieren PDF mit jspdf wird kein CSS gerendert

Ich verwende jspdf.debug.js, um verschiedene Daten von einer Website zu exportieren, aber es gibt ein paar Probleme. Ich kann nicht das CSS in das exportierte PDF rendern und wenn ich ein Bild auf der Seite habe bin beim Exportieren, die PDF gibt leer zurück ...

Kennt jemand eine Möglichkeit, dies zu beheben?

Hier ist ein jsfiddle , das anzeigt, dass das CSS nicht gerendert wird

Und mein Drehbuch 

$(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 );
})
});
22
Alin

Wie ich weiß, arbeitet jsPDF nicht mit CSS und demselben Problem, mit dem ich zu tun hatte.

Um dieses Problem zu lösen, habe ich Html2Canvas verwendet. Also einfach Add HTML2Canvas JS und dann pdf.addHTML () anstelle von pdf.fromHTML ().

Hier ist mein Code (kein anderer Code):

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

Viel Glück!

Edit: Siehe hier falls Sie addHTML () nicht gefunden haben

20
Mihir

jspdf funktioniert nicht mit css, kann aber auch mit html2canvas zusammenarbeiten. Sie können jspdf zusammen mit html2canvas verwenden.

fügen Sie diese beiden Dateien in das Skript auf Ihrer Seite ein:

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

Sie müssen Skriptdateien wie https://github.com/niklasvh/html2canvas/releaseshttps://cdnjs.com/libraries/jspdf herunterladen.

klicken Sie auf die Schaltfläche auf der Seite, um die PDF-Datei zu generieren und sie wird genauso angezeigt wie die ursprüngliche HTML-Seite.

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

Es wird perfekt funktionieren. 

10
Bhinal Chauhan

Sie können das Beispiel für die Implementierung der HTML-Konvertierung in HTML unter Verwendung von jspdf unter folgendem Link erhalten: JSFiddle Link

Dies ist ein Beispielcode für das Jspdf-HTML-Dokument zum Herunterladen.

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

Leichte Änderung an @ rejesh-yadav wunderbare Antwort.

html2canvas gibt jetzt ein Versprechen zurück.

    html2canvas(document.body).then(function (canvas) {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF();
        doc.addImage(img, 'JPEG', 10, 10);
        doc.save('test.pdf');        
    });

Hoffe das hilft einigem!

0
user3180664