保存ブートストラップカルーセルPDF

Question

に、私は数日のためにこれに取り組んとどこにもなっていないしてきた...

私たちは、私たちが対話をデジタル化して追加しようとしている紙の本を持っている（本はいくつかを持っています記入可能なフィールドなど）。考え方は、各ページを1つのスライドとしてブートストラップカルーセルに入れ、ユーザーがページ間を切り替えてテキストボックスに記入させるというものでした。これまでのところとても良い、その部分はほとんどうまく動作しています。

これで、入力したページをPDFにエクスポートまたは保存する必要があります。私はjsPDFとhtml2canvasで多くのことを試しましたが、どれも正しく動作しているようです。私はJavascriptのプログラミングで比較的初心者です。私は2つの問題があります：

1）私は一度にカルーセルのスライドを1つだけ変換すれば、出力PDFはひどく見えます。本当にアーティファクトがたくさんある低品質です。私は出力をスクリーン上でユーザーに表示されるものに忠実にする方法を理解できません。 PDFへのスライドを変換するための

コード：

html2canvas(document.getElementById('pg'+i), { 
    onrendered: function(canvasObj) { 
    var pdf = new jsPDF(); 
    var image = canvasObj.toDataURL("image/png"); 

    pdf.addImage(image, "png", 0, 0, 210, 297); 
    } 
}); 

2）私は、複数ページのPDFへカルーセルの複数のスライドを変換しようとすると、私は読むことができないというエラーの多くを得ますスライド。私は、現在アクティブで画面上に表示されている場合にのみ、スライドとスライドの内容を読むことができると考えています。単一のマルチページのPDFに複数のスライドを変換するための

コード：このまたは何か間違ったことの明らかな兆候を修正する方法について

var pdf = new jsPDF(); 
for (var i=1;i<=16;i++) { 
    $('#bookCarousel').carousel(i); 
    html2canvas(document.getElementById('pg'+i), { 
    onrendered: function(canvasObj) { 
     var image = canvasObj.toDataURL("image/png"); 

     pdf.addImage(image, "png", 0, 0, 210, 297); 
     if (i < 16) {pdf.addPage();} 
     console.log(i); 
    } 
    }); 
} 
pdf.save('booklet.pdf'); 

任意の提案ですか？ （または、代わりに、この目標を達成するためのより良い方法）

Answer 1

これは他の誰にも役立ちますが、2）への正解はプロミスを使用するのではなく、スライドを聞くことです。ブートストラップカルーセルによって生成されたbs.carouselイベントによって、スライドが完了した時点を知ることができます。画像サイズが実際に正しいサイズに近づくとダウンサンプリングが起こる小さくなるよう

var pdf = new jsPDF('p', 'mm', 'a4'); 

var pagenum = 1; 
$('#bookCarousel').on('slid.bs.carousel', function() { //After each slide 
    var pg = document.getElementById("pg"+pagenum.toString()); 
    //Set up the canvas on the page/div 
    html2canvas(pg, {width:pg.scrollWidth, height:pg.scrollHeight, logging:false}) 
      .then(function(canvas){ 
       var imgData = canvas.toDataURL(); 
       pdf.addImage(imgData, 'PNG', 0, 0); 

       //Assuming there are 16 pages in total 
       if (pagenum<16) { 
        pdf.addPage() 
        pagenum++; 
        slideCarousel(pagenum); //Slide to the next page 
       } else { 
        //Save the book, turn off the event listener 
        pdf.save("booklet.pdf") 
        $('#bookCarousel').off('slid.bs.carousel'); 
       }; 
      }); 
}); 
slideCarousel(pagenum); //Start it all off 

1）は幾分、オープン要素を検証することなく、この機能を実行することによって固定されています。