html2canvas ve jspdf'yi pdf'ye doğru ve basit bir şekilde vermek için nasıl kullanılır

Question

Şu anda, genellikle data tables ve div tag içeren html içeriğinin dışa aktarılmasını gerektiren bir okul yönetimi yazılımı üzerinde çalışıyorum.

Ben tercihen css ile iyi bir şekilde benim html verilerini dışa mümkün olacak bir kod yazmak için olası tüm araçları çalıştılar. Bazı soruları ve cevapları kontrol ettikten sonra spdf kullanmayı denedim, ama şans yok.

Benim masa hizalama yok tutar, o zaman ben okumak yaklaşık html2canvashtml2canvas bir div etiketi sonra da tuval ihracat jspdf için tuval gönderirseniz benim sorunum, ben içerik yakalamak istiyoruz edildi jspdf ile uygulamak ancak pdf.

burada

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

js kodunu Sana bir jsfiddle yaptık

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

Answer 1

geçerli:

İşte aşağıda benim kodudur.

<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/ Chrome38, IE11 içinde test edilmiş ve Firefox 33. Safari ile sorunları var gibi görünüyor. Ancak Andrew, Mac OSx'te Safari 8'de PNG'den JPEG'e geçerek çalışmıştır. Ayrıntılar için aşağıdan yorum sayfasına bakın.