您如何使用Html2Canvas和JsPDF連接兩個或pdf圖像？

Question

我試圖圍繞HTML2Canvas的API進行研究，但是文檔非常有限。 情況是，我將2個或多個div（它們的內容）放入單個PDF中，其中每個div代表一個不同的頁面。 聽起來容易嗎？ 並不是的。 我已經盡一切努力使此工作正常進行，但是JS的異步特性使這種方法比必須的更加困難。

這是我所擁有的

     html2canvas($("#monthly_agg_report_container"), {

                onrendered: function(canvas)
                {
                    var doc = new jsPDF('landscape', 'pt','a2');
                    var imgData = canvas.toDataURL("image/png");

                    doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);

                    doc.save('report.pdf')  ;
                }
                }).then(function(){

//another html2canvas doesnt work. PDF comes with a empty page. Because `doc` is out of scope 
                alert('done')

                        })

Answer 1

這是對我有用的代碼：

function generatePDF() {


    var doc = new jsPDF('landscape', 'pt','a2');
    console.log(doc);

   html2canvas($("#monthly_agg_report_container"), {

            onrendered: function(canvas)
            {

                var imgData = canvas.toDataURL("image/png");


                doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);

            //  doc.save('report.pdf')  ;
            }
            }).then(function(){


                        html2canvas($("#descriptor_stats_container"), {

                            onrendered: function(canvas)
                            {
                                console.log('2nd doc '+doc); 
                                doc.addPage();
                                var imgData = canvas.toDataURL("image/png", 1.0);


                                doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);

                                //doc.save('report.pdf')    ;
                            }
                            }).then(function(){
                                alert('done')

                                    html2canvas($("#alerts_stats_container"), {

                                    onrendered: function(canvas)
                                    {
                                        console.log('2nd doc '+doc); 
                                        doc.addPage();
                                        var imgData = canvas.toDataURL("image/png");


                                        doc.addImage(imgData,'PNG',0,0,canvas.width*1.33,canvas.height*1.33);

                                        doc.save('report.pdf')  ;
                                    }
                                    })

                            })
                    })





}