Echarts图表之插件生成PDF下载

来源：互联网发布：中国网络经纪人安居客编辑：程序博客网时间：2024/05/19 22:06

需要用到的插件：

<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jspdf.min.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts3.js" type="text/javascript" charset="utf-8"></script>

html2canvas：将页面的dom元素转为图片的形式
jspdf：页面端的生成pdf工具，可以跳过后台进行下载。
echart：图表生成插件

页面代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="main" style="height:400px"></div>        <button onclick="convertCanvasToImage()">download pdf</button>    </body>    <script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/jspdf.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/echarts3.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        var myChart = echarts.init(document.getElementById('main'));        var option = {            backgroundColor: 'white',            title: {                text: 'ECharts 入门示例'            },            tooltip: {},            legend: {                data: ['销量']            },            xAxis: {                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };        myChart.setOption(option);    </script>    <script type="text/javascript">        function convertCanvasToImage() {            html2canvas(document.getElementById('main'), {                onrendered: function(canvas) {                    document.body.appendChild(canvas);                    createPDFObject(canvas.toDataURL("image/jpeg"));                }            });        }        function createPDFObject(imgData) {            var doc = new jsPDF('p', 'pt');            doc.addImage(imgData, 5, 5, 600, 300, 'img');            doc.save('test.pdf')        }    </script></html>

注：
①Echarts的option里面一定要设置背景颜色，否则的话，jspdf插件会默认将黑色作为背景色。
②因为只需要添加图表到pdf，所以设置字体的一些代码按需添加。

0 0