根据网上所查资料显示,目前不支持直接将Echarts统计图导出为PDF文件,但是可以将统计图转成图片,再将图片转成PDF文件。此处使用了插件html2canvas.min.js及jspdf.min.js:
document.write("<script type='text/javascript' src='./topdf/html2canvas.min.js'></script>");
document.write("<script type='text/javascript' src='./topdf/jspdf.min.js'></script>");
document.write("<script type='text/javascript' src='./topdf/echarts.min.js'></script>");
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'white',
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
function convertCanvasToImage() {
html2canvas(document.getElementById('main'), {
onrendered: function(canvas) {
/* document.body.appendChild(canvas); */
createPDFObject(canvas.toDataURL("image/jpeg"));
}
});
}
function createPDFObject(imgData) {
//默认a4纸张
var doc = new jsPDF('p', 'pt',"a3");
doc.addImage(imgData, 5, 5, 600, 300, 'img');
doc.save('GCXDATA_PDF.pdf');
}
<div id="main" style="height:400px"></div>
<button onclick="convertCanvasToImage()">download pdf</button>
参考:https://segmentfault.com/a/1190000011478657
https://segmentfault.com/q/1010000013080174