Exportieren von PDF mit jspdf nicht rendern CSS

Question

Ich benutze jspdf.debug.js, um verschiedene Daten von einer Website zu exportieren, aber es gibt ein paar Probleme, ich kann es nicht bekommen, um das CSS in das exportierte PDF zu rendern und wenn ich habe ein Bild auf der Seite, die ich exportiere, die PDF-Datei leer ...

Kennt jemand eine Möglichkeit, das zu beheben? Hier

ist ein jsfiddle zeigt dies nicht der Folge, daß die CSS

Und mein Skript

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

Answer 1

Wie ich weiß jsPDF nicht mit CSS und demselben Problem arbeiten ich gegenüberstand.

Um dieses Problem zu lösen, verwendet i Html2Canvas So nur HTML2Canvas JS und dann pdf.addHTML() statt pdf.fromHTML() Add.

Hier ist mein Code (kein anderer Code):

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

Best of Luck!

Edit: Siehe here falls Sie nicht addHTML finden()

Answer 2

schwarzen Hintergrund entfernen nur Hintergrund-Farbe hinzufügen: white; zum Stil von

Answer 3

jspdf funktioniert nicht mit CSS, aber es kann mit html2canvas zusammen arbeiten. Sie können jspdf zusammen mit html2canvas verwenden.

umfassen diese beiden Dateien in Skript auf Ihrer Seite:

<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 benötigen Skriptdateien zum Herunterladen wie https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

machen anklickbaren Button auf Seite, so dass es pdf generieren wird und es wird genauso wie die ursprüngliche HTML-Seite gesehen.

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

Es wird perfekt funktionieren.