2017-02-16 66 views
0

私はjsPdfとhtml2pdfを使ってhtmlをpdfファイルに変換しています。jspdf複数のページでhtmlからpdfに変換

htmlファイルを変換してダウンロードすることはできますが、htmlが大きすぎて1ページに収まらない場合、他のページは作成されません。どうすればよいですか?

コードは次のとおりです。

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

googleそれらは簡単に見つかります。 divラッパーレポートで印刷可能なコードを取得します。印刷ボタンで関数を呼び出します。例えば (それ以外のCDNサイトからの外部コードを許可していませんが、それは、サーバー上で動作しますので、jsfiddleのコードでは動作しません)

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

関連する問題