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')  ;
                                    }
                                    })

                            })
                    })





}

你如何使用Html2Canvas＆amp; amp;和pdf连接两个或图像。 JsPDF？

1 个答案: