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

Question

添加到此 stackoverflow 问题:Generating pdf using multiple graphs using html2canvas and jspdf

我尝试使用 Promise javascript api，如下所示:

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

}

}

我正在做的是发送代表谷歌图表面板的 33 个 divname 作为 jspdf 的参数来生成 pdf。

问题:但是，当单击“生成 pdf”按钮时，Chrome 浏览器会崩溃。经过调试，似乎是通过了for循环。然而它永远不会出现在 Promise.all 函数中。

此外，最好指出以下几点:

1. 例如，当我只传递 4 个 div 时，pdf 就成功生成了。那么这是 Chrome 无法处理生成的大量 Base 64 的问题吗？
2. 我在将图像添加到 pdf 时使用了“FAST”参数，以使其也被压缩。

对此有何反馈？请问我做错了什么吗？

Answer 1

代码似乎可以工作，但扩展性不太好。

通过并行执行所有操作，JavaScript 的垃圾收集 (GC) 可能没有机会清除中间对象，并且过大的堆会导致崩溃。

执行系列操作可能会产生积极的效果。该代码只是从问题中的代码派生出来的。

首先，一个适配器函数，它 promise html2canvas() :

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

现在调用 divNamesForPDF.reduce(...) 来序列化异步操作并逐步添加到 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');
        });
    }
}

仅检查语法

正如我所说，这并不比“可能”更好地解决问题。尝试一下并不需要花费任何费用。最糟糕的情况可能是 Chrome 再次崩溃。