完整的demo如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Balken</title>
<script src="static/echarts/echarts.js"></script>
<script type="text/javascript" src="static/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<!--jspdf本地地址-->
<script type="text/javascript" src="static/dist/jspdf.umd.js"></script> <!--jspdf在线地址 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> -->
<!--解决中文乱码必须要引入这个js文件--> <script src="https://cdn.bootcss.com/jspdf/1.4.0/jspdf.debug.js"></script> </head> <body> <div id="body"> <div id="chart"></div> </div> <!-- prepare a DOM container with width and height --> <div id="main" style="width: 750px; height: 500px"></div> <script type="text/javascript"> // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('main')); // specify chart configuration item and data //柱状图 var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Salami', type: 'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] } ] }; //折线图 option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Email', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: 'Total', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'Total', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'Total', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // use configuration item and data specified to show chart myChart.setOption(option); //console.log(dataURL); myChart.on("finished",function(){ $('#exportButton').show(); }); $(function(){ $('#exportButton').click(function () { var canvas = document.getElementById('main'); var dataURL = ($('canvas')[0]).toDataURL("image/png"); var pdf = new jsPDF(); //pdf.addFont('ttc/sourcehansanscnnormal.ttf', 'sourcehansanscnnormal', 'normal'); //pdf.setFont("sourcehansanscnnormal", "normal"); // set font var font = 'AAEAAAASAQAABAAgQkFTRRuOGNgAmikcAAAA5ERTSUcAAAABAJzqNAAAAAhHREVGAg4CAQCaKgAAAAAcR1BPU46pJ7gAmiocAACr3EdTVULOa52FAJrV+AAALlZPUy8ykrjwBLAEIAJQBCACEAKQBtAbIAhwHgAj8AKQAAADQAMQAyADAALwA8AD4AWAAwAD0AbQAmAHEANQA3AEQAIwAqACsAKAArABYAXQBTAIsAAAAAAAEAAAAA'; pdf.addFileToVFS('sourcehansanscnnormal-normal.ttf', font); pdf.addFont('sourcehansanscnnormal-normal.ttf', 'sourcehansanscnnormal', 'normal'); pdf.setFont("sourcehansanscnnormal", "normal"); pdf.text("生成的测试表格图如下：", 5, 10); pdf.setTextColor(255, 0, 0); pdf.setFontSize(20); pdf.text("备注：", 5, 25); pdf.addImage(dataURL, 'JPEG', 0, 30);//,200,150 第五、第六个参数表示图片宽高 pdf.save('download.pdf'); }) }); </script> <button id="exportButton" type="button" style="display:none;">Export as PDF</button> </body> </html>
标签：报表,data,var,pdf,sourcehansanscnnormal,type,echarts,name From： https://www.cnblogs.com/andydao/p/18061173