使用多个谷歌图表和jspdf生成PDF

Question

Adding to this stackoverflow question: Generating pdf using multiple graphs using html2canvas and jspdf

I have tried to use the Promise javascript api as follows:

function GeneratePDFforCharts(divNamesForPDF)
{


var arrayOfPromises = [];

//Note: Checking if the browser supports Promises
if (window.Promise) {

    for (var i = 0; i < divNamesForPDF.length; i++)
    {
        var promise = new Promise(function (resolve, reject) {
            //asynchronous code goes here
            //Note: The Promise is passed a callback function. The callback takes two arguments, resolve and reject.
            //Note: If everything is successful, the promise is fullfilled by calling resolve(). In case of an error, reject() is called with an Error object.
            var element = $(divNamesForPDF[i]).get(0);
            html2canvas(element, {
                onrendered: function (canvas) {
                    resolve(canvas.toDataURL('image/png'));
                }
            });
        });
        arrayOfPromises.push(promise);
    }

    Promise.all(arrayOfPromises).then(function (canvases) {
        var count = 0;
        var pageNumber = 1;

        var doc = new jsPDF('l', 'mm', [297, 210], true); //true is set for pdf compression

        for (var i = 0; i < canvases.length; i++)
        {
            if (isOdd(count)) //2nd chart
            {
                doc.addImage(canvases[i], 'PNG', 10, 105, 270, 100, null, 'FAST'); //x, y, width, height - FAST is used for png compression
                var pageNo = pageNumber.toString();
                doc.text(140, 207, pageNo); //x, y, text
                pageNumber++;
            }
            else //1st chart
            {
                if (count != 0)
                {
                    doc.addPage();
                }
                doc.addImage(canvases[i], 'PNG', 10, 5, 270, 100, null, 'FAST');
            }
            count++;
        }

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

}

}

What I am doing is sending 33 divnames representing google chart panels as a parameter for the jspdf to generate the pdf.

Problem: However, the Chrome browser is crashing when clicking on the generate pdf button. After debugging it seems that it is passing the for loop. However it never goes in the Promise.all function.

Also, it is good to point out the following:

1. When I just pass 4 divs for example, the pdf is generated successfully. So it is a matter of chrome not handling that amount of base 64s being generated?
2. I used the 'FAST' parameter when adding image to pdf so as to make it compressed aswell.

Any feedback on this? Am I doing something wrong please?

Answer 1

It seems that the code works but doesn't scale too well.

It's possible that by performing all operations in parallel, javascript's Garbage Collection (GC) isn't given the opportunity to clear intermediate objects, and an oversized heap causes the crash.

Performing the operations in series may have a positive effect. The code is simply derived from the code in the question.

First, an adaptor function, which promisifies html2canvas() :

function html2canvasAsync(element) {
    return new Promise(function(resolve, reject) {
        html2canvas(element, {
            onrendered: function (canvas) {
                resolve(canvas.toDataURL('image/png'));
            }
        });
    });
};

Now call divNamesForPDF.reduce(...) to serialize the asynchronous operations and progressively add to the jsPDF doc :

function GeneratePDFforCharts(divNamesForPDF) {
    if (window.Promise) {
        var doc = new jsPDF('l', 'mm', [297, 210], true); //true is set for pdf compression
        return divNamesForPDF.reduce(function(p, name, i) {
            return p.then(function(pageNumber) {
                return html2canvasAsync($(name).get(0)) // or `document.getElementById(name)` ?
                // return html2canvasAsync(document.getElementById(name)) // possibly?
                .then(function(canvas) {
                    if (isOdd(i)) { // odds
                        doc.addImage(canvas, 'PNG', 10, 105, 270, 100, null, 'FAST'); //x, y, width, height - FAST is used for png compression
                        doc.text(140, 207, pageNumber.toString()); //x, y, text
                        pageNumber++;
                    } else { // evens
                        if (i > 0) {
                            doc.addPage();
                        }
                        doc.addImage(canvas, 'PNG', 10, 5, 270, 100, null, 'FAST');
                    }
                    return pageNumber;
                }).catch(function(e) {
                    // Error handling is a good idea
                    console.log(e);
                    doc.text(35, 25, e.message); // possibly add the error message to doc
                });
            });
        }, Promise.resolve(1)) // starter promise resolved with page number 1
        .then(function() {
            doc.save('IEA_Global_MonthlyStocks_Analytics.pdf');
        });
    }
}

checked only for syntax

As I say, it's no better than "possible" that this will fix the issue. It won't cost anything to give it a try. The worst that might happen is another Chrome crash.