当我们使用 html2canvas 和 jsPDF 库有多个图表时，会生成空 PDF 报告答案

【问题标题】：Empty PDF report is generated when we have multiple graphs using html2canvas and jsPDF library当我们使用 html2canvas 和 jsPDF 库有多个图表时，会生成空 PDF 报告
【发布时间】：2016-04-25 21:16:03
【问题描述】：

我在 One page 中有两个 flot 图表，并且使用下面的代码，我想使用 jsPDF 在两个不同的页面中创建它们的报告（但一个 PD 文件）这里是我的代码：让我们使用这个示例图：

function flot1() {
        var oilPrices = [[1167692400000, 61.05], [1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31], [1168210800000, 55.55], [1168297200000, 55.64]
            , [1168383600000, 54.02], [1168470000000, 51.88], [1168556400000, 52.99], [1168815600000, 52.99], [1168902000000, 51.21], [1168988400000, 52.24], [1169074800000, 50.48]];

        var exchangeRates = [[1167606000000, 0.7580], [1167692400000, 0.7580], [1167778800000, 0.75470], [1167865200000, 0.75490], [1167951600000, 0.76130], [1168038000000, 0.76550],
            [1168124400000, 0.76930], [1168210800000, 0.76940], [1168297200000, 0.76880], [1168383600000, 0.76780], [1168470000000, 0.77080], [1168556400000, 0.77270],
            [1168642800000, 0.77490], [1168729200000, 0.77410], [1168815600000, 0.77410], [1168902000000, 0.77320], [1168988400000, 0.77270], [1169074800000, 0.77370],
            [1169161200000, 0.77240], [1169247600000, 0.77120]];

        var data = [
            { data: oilPrices, label: "Oil price ($)" },
            { data: exchangeRates, label: "USD/EUR exchange rate", yaxis: 2 }
        ];

        var options = {
            canvas: true,
            xaxes: [{ mode: "time" }],
            yaxes: [{ min: 0 }, {
                position: "right",
                alignTicksWithAxis: 1,
                tickFormatter: function (value, axis) {
                    return value.toFixed(axis.tickDecimals) + "€";
                }
            }],
            legend: { position: "sw" }
        }

        plot = $.plot("#placeholder_2", data, options);
    }

    function flot2() {
        plot = $.plot($("#placeholder"), [{ label: 'Test', data: [[0, 0], [1, 1]] }], { yaxis: { max: 1 } });
    }

var doc = new jsPDF();
html2canvas($("#placeholder").get(0), {
    onrendered: function (canvas) {
         var imgData = canvas.toDataURL('image/png');
         doc.addImage(imgData, 'PNG', 10, 10, 180, 115);
              }
            });

var element = $("#placeholder_2").get(0);
html2canvas(element, {
    onrendered: function (canvas2) {
         var imgData2 = canvas2.toDataURL('image/png');
         doc.addPage()
         doc.addImage(imgData2, 'PNG', 10, 10, 180, 60);
              }
           });

doc.save('sample-file.pdf');

问题是：

当我使用 ONE 图形保存 pdf 时，它可以正常工作，但是将 doc.save() 放在 canvas 渲染的末尾后，创建的 PDF 文件是空的。

注意：我使用 html2canvas 和 jsPDF 库。

【问题讨论】：

你能建立一个fiddle 来重现你的问题吗？
@Raidri 我在下面的答案中创建了一个小提琴。但是我无法理解小提琴的问题，它无法得到结果。但在我的代码中它工作正常。并在 2 页中创建 PDF 报告

标签： pdf canvas flot jspdf html2canvas

【解决方案1】：

然后问题是由于转换图像和创建 pdf 的异步执行。

一种解决方案是使用异步函数。因为“doc.save()”在 Html2Canvas 完成从图形创建画布之前执行，所以它是空的。

我在这里创建了fiddle。这是在 JavaScript 中使用Promise API 进行异步执行的代码。(promise.all)

 var p1 = new Promise(function (resolve, reject) {
     var element = $("#placeholder").get(0);
       html2canvas(element,
                        {
                            onrendered: function (canvas) {
                                resolve(canvas.toDataURL('image/png'));
                            }
                        });
        });


 var p2 = new Promise(function (resolve, reject) {
     var element = $("#placeholder_2").get(0);
       html2canvas(element,
                    {
                        onrendered: function (canvas) {
                            resolve(canvas.toDataURL('image/png'));
                        }
                    });
        });

  Promise.all([p1, p2]).then(function (screens) {
            var doc = new jsPDF();
            doc.addImage(screens[0], 'PNG', 10, 10, 180, 115);
            doc.addPage();
            doc.addImage(screens[1], 'PNG', 10, 10, 180, 60);
            doc.save('sample-file.pdf');

    });

【讨论】：