wie html2canvas und jspdf zu verwenden, um in pdf auf eine richtige und einfache Weise zu exportieren

Question

Ich arbeite derzeit an einer Schulverwaltungssoftware, die normalerweise den Export von HTML-Inhalten erfordert, die data tables und div tag enthält.

Ich habe alle möglichen Mittel versucht, einen Code zu schreiben, der in der Lage sein wird, meine HTML-Daten in einer guten Weise, mit css vorzugsweise zu exportieren. Nachdem ich einige Fragen und Antworten hier überprüft habe, habe ich versucht, spdf zu verwenden, aber kein Glück.

Es hält meine Tabelle Ausrichtung zu zerstören, dann lese ich über html2canvas aber zu ihrer Umsetzung mit jspdf wurde mein Problem, würde Sie mag den Inhalt erfassen, wenn ein div-Tag mit html2canvas dann die Leinwand zu jspdf senden, um die Leinwand zu exportieren als pdf.

Hier ist mein Code unten:

<script src="assets/js/pdfconvert/jspdf.js"></script> 
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script> 
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script> 
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js"> </script> 
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script> 
<script src="assets/js/pdfconvert/filesaver.js"></script> 
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script> 
<script src="assets/js/pdfconvert/html2canvas.js"></script> 
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script> 

hier ist der js Code

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

Answer 1

ich jsfiddle für Sie gemacht haben.

<canvas id="canvas" width="480" height="320"></canvas> 
     <button id="download">Download Pdf</button> 

'

 html2canvas($("#canvas"), { 
      onrendered: function(canvas) {   
       var imgData = canvas.toDataURL(
        'image/png');    
       var doc = new jsPDF('p', 'mm'); 
       doc.addImage(imgData, 'PNG', 10, 10); 
       doc.save('sample-file.pdf'); 
      } 
     }); 

jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/

Geprüft Chrome38, IE11 und Firefox 33. Es scheint Probleme mit Safari zu haben. Allerdings hat Andrew es in Safari 8 auf Mac OSx funktioniert, indem er von PNG zu JPEG wechselte. Einzelheiten finden Sie in seinem Kommentar unten.