当我们使用html2canvas和jsPDF库创建多个图形时，将生成空的PDF报告. [英] Empty PDF report is generated when we have multiple graphs using html2canvas and jsPDF library

问题描述

我在一页中有两个浮动图表，并使用下面的代码，我想使用jsPDF在两个不同的页面中创建它们的报告(但是一个PD文件) 这是我的代码: 让我们使用以下示例图:

I have two flot charts in One page , and with the code below, I want to use jsPDF to create report of them in two different pages (but one PD file) here id my code: Lets use this sample graphs :

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时，它可以正常工作，但是在将doc.save()放在画布渲染的末尾之后，创建的PDF文件为空.

when I save pdf with ONE graph, it works fine, but after puting doc.save() at the end of canvas renders , the created PDF file is empty.

注意:我使用 html2canvas 和 jsPDF 库.

推荐答案

然后出现问题是因为异步执行了转换图像和创建pdf的操作.

Then problem was because of async execution of converting image and creating pdf.

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

One solution is using Asynchronous functions.because the "doc.save()" was executing before Html2Canvas finished creating canvas from graph, so it was empty.

我在此处创建了小提琴. 这是使用JavaScript中的 Promise API进行异步执行的代码.( promise.all )

I created a fiddle here. this is the code for Asynchronous execution using Promise API in JavaScript.(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');

    });

这篇关于当我们使用html2canvas和jsPDF库创建多个图形时，将生成空的PDF报告.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！