come utilizzare html2canvas e jspdf per esportare in pdf in modo corretto e semplice

Question

Attualmente sto lavorando a un software di gestione della scuola che di solito richiede l'esportazione di contenuti HTML contenenti data tables e div tag.

Ho provato tutti i mezzi possibili per scrivere un codice che sarà in grado di esportare i miei dati html in un modo buono, con css preferibilmente. Dopo aver controllato alcune domande e risposte qui, ho provato a usare spdf, ma senza fortuna.

Mantiene distruggere la mia allineamento tavolo, poi ho letto di html2canvas ma per la sua attuazione con jspdf era il mio problema, vorrei catturare il contenuto se un tag div con html2canvas quindi inviare la tela per jspdf esportare la tela come PDF.

Ecco il mio codice qui sotto:

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

Ecco il codice js

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

Answer 1

Ho fatto un jsfiddle per voi.

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

testato in Chrome38, IE11 e Firefox 33. Sembra avere problemi con Safari. Tuttavia, Andrew ha funzionato in Safari 8 su Mac OSx passando a JPEG da PNG. Per i dettagli, vedi il suo commento qui sotto.