java canvas详解 pdf_当我们使用 html2canvas 和 jsPDF 库有多个图形时，会生成空 PDF 报告...-CSDN博客

本文链接：https://blog.csdn.net/weixin_39669075/article/details/114999801

本文介绍了在使用jsPDF库和html2canvas将多个Flot图表转换为PDF时遇到的问题。当尝试在不同页面上保存两个图表时，生成的PDF报告显示为空。代码示例展示了如何创建和渲染图表，以及如何利用html2canvas将它们转化为PDF，但最终保存的PDF未正确显示内容。问题可能出在canvas元素到PDF的转换过程中。

摘要由CSDN通过智能技术生成

我在一个页面中有两个 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 文件为空。