如何使用 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')  ;
                                    }
                                    })

                            })
                    })





}