首页 文章

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

提问于
浏览 次
3

我在一个页面中有两个 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()后，创建的 PDF 文件为空。

注意：我使用html2canvas和jsPDF库。

pdf canvas flot jspdf html2canvas

1 回答

  • 2

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

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

    我在这里创建了一个小提琴。这是在 JavaScript.(promise.all中使用诺言 API 进行异步执行的代码

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

    });
    回复于

相关问题