使用html2canvas和jsPDF库生成多个图形时，会生成空的PDF报告。

Question

我在一个页面上有两个浮动图表，使用下面的代码，我想使用jsPDF将它们创建为两个不同的页面（但是一个PDF文件）。 这是我的代码： 让我们使用这些示例图表：

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

问题是：

当我保存带有一个图表的PDF时，它可以正常工作，但在canvas渲染结束后加上doc.save()后，创建的PDF文件为空。

注意：我使用html2canvas和jsPDF库。

- Sara N

---

你能否构建一个 fiddle，以重现你的问题？ - Raidri

@Raidri 我在下面的答案中创建了一个Fiddle。然而，我无法捕捉到Fiddle的问题，它无法获得结果。但在我的代码中，它可以正常工作，并创建2页的PDF报告。 - Sara N

Answer 1

问题是由于图像转换和创建PDF的异步执行而引起的。

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

我在这里创建了一个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');

    });

- Sara N