How do you concatenate two or images in pdf using Html2Canvas & JsPDF?

Question

I am trying to wrap my head around HTML2Canvas' API but the documentation is extremely limited. The situation is that I am putting 2 or more div's (thier content) into a single PDF where each div represents a different page. Sounds easy right ? Not really. I have tried everything to make this work, but the asynchournous nature of JS is making this way harder than it has to be.

Here is what I have

     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

This is the code that worked for me:

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

                            })
                    })





}