2017-02-16 103 views
0

我使用jsPdf和html2pdf將html轉換爲pdf文件。jspdf將html轉換爲多頁pdf格式

我可以轉換html罰款和下載文件,但如果html太大,不適合單個頁面,它不會創建其他頁面,我該怎麼做?

代碼:

var pdf = new jsPDF('l', 'pt', 'a4'); 
pdf.canvas.height = 72 * 11; 
pdf.canvas.width = 72 * 8.5; 
html2pdf(document.getElementById(id), pdf, function(pdf){ 
    pdf.save('file.pdf'); 
}); 

回答

1

如果以上回答不工作我已經做了這樣的:

下載,其中包括爲了:

  1. jQuery的
  2. html2canvas
  3. jspdf

谷歌他們他們很容易找到。然後將您的可打印代碼放在div封裝報告中。並用打印按鈕調用該功能。 例如(在的jsfiddle代碼將無法工作,因爲它不允許從非CDN網站外部的代碼,但它會在服務器上運行)

$(document).ready(function() { 
    var form = $('#report'); 
    var cache_width = form.width(); 
    var a4 = [595.28, 841.89]; 


    $('#create_pdf').on('click', function() { 
    $('body').scrollTop(0); 
    createPDF(); 
    }); 

    //create pdf 
    function createPDF() { 
    getCanvas().then(function(canvas) { 
     var imgWidth = 200; 
     var pageHeight = 290; 
     var imgHeight = canvas.height * imgWidth/canvas.width; 
     var heightLeft = imgHeight; 
     var doc = new jsPDF('p', 'mm'); 
     var position = 0; 

     var img = canvas.toDataURL("image/jpeg"); 




doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight); 
    heightLeft -= pageHeight; 



    while (heightLeft >= 0) { 
    position = heightLeft - imgHeight; 
    doc.addPage(); 
    doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight); 
    heightLeft -= pageHeight; 
    } 


    doc.save('Report.pdf'); 
    form.width(cache_width); 
    }); 
} 


// create canvas object 
    function getCanvas() { 
    form.width((a4[0] * 1.33333) - 80).css('max-width', 'none'); 
    return html2canvas(form, { 
     imageTimeout: 2000, 
     removeContainer: false 
    }); 
    } 

}); 

https://jsfiddle.net/vnfts73o/1