Is there a way to combine multiple images into one PDF document using Html2Canvas and JsPDF?

Question

Is there a way to combine multiple images into one PDF document using Html2Canvas and JsPDF?

Trying to understand the HTML2Canvas API has been quite challenging due to the limited documentation available. My goal is to place multiple div elements, each representing a different page, into a single PDF file. It might sound simple at first, but in reality, it's much more complex. I've experimented with various approaches to achieve this, only to discover that the asynchronous nature of JavaScript adds another layer of difficulty.

This is what I currently 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 attempt didn't work properly, resulting in an empty page in the PDF.
    alert('done');
})

javascript jspdf html2canvas

Answer 1

Answer №1

I found this solution to be effective:

function generatePDF() {


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

   html2canvas($("#monthly_agg_report_container"), {

            onrendered: function(canvas)
            {

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


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

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


                        html2canvas($("#descriptor_stats_container"), {

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


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

                                //document.save('report.pdf')    ;
                            }
                            }).then(function(){
                                alert('Process completed')

                                    html2canvas($("#alerts_stats_container"), {

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


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

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

                            })
                    })





}

Answer 2

I found this solution to be effective:

function generatePDF() {


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

   html2canvas($("#monthly_agg_report_container"), {

            onrendered: function(canvas)
            {

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


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

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


                        html2canvas($("#descriptor_stats_container"), {

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


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

                                //document.save('report.pdf')    ;
                            }
                            }).then(function(){
                                alert('Process completed')

                                    html2canvas($("#alerts_stats_container"), {

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


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

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

                            })
                    })





}

Is there a way to combine multiple images into one PDF document using Html2Canvas and JsPDF?

Answer №1

Similar questions

Using Polymer 0.5 in real-world applications

increasing the size of a picture without resorting to a pop-up window

What could be causing my asynchronous JavaScript/Node.js function to bypass a significant portion of the code?

Stop the execution of jQuery ready handlers

Implementing Vue method to apply filter criteria on an array for efficient data filtering

Angular - Javascript - Oops! The variable 'google' seems to have gone missing after reloading the page

Storing knockout view model data in a database and fetching it back

SSE and the power of NodeJS through Express

Could someone assist me with understanding how to use the Load function in JQuery?

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

The Redux Toolkit Slice Reducer fails to function properly when incorporating an extra Reducer that is not compatible

How can I implement BoxHelper on an Object3D containing children in Three.js?

The functionality for the "OnChange" event in the <html:select> field does not seem to be functioning properly

How to instantly return progress bar to zero in bootstrap without any animations

What is the best way to calculate the combined total of radio button values using jQuery or JavaScript?

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Is there a way to eliminate an object from a multidimensional nested array in JavaScript and retrieve the parent array?

Angular 1.5 - Component for fetching HTML content with dynamic data

Using JavaScript to locate a child element within its parent

Struggling to retrieve unpredictable data in a Vue.js component