echarts报表生成pdf文件

完整的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>

 

posted on 2024-03-08 15:52  andydaopeng  阅读(78)  评论(0)  编辑  收藏  举报

导航