使用Echarts和JSPDF图表到PDF

我已经创建了一个带有echarts的图形，并希望使用JSPDF将其包括在PDF中。

一世 成立 这样做的一种方法可能是使用画布，将图形传输到图像，

最后将图像包括在PDF中。但是，我无法将图形传输到图像。这是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Balken</title>
    <script src="echarts.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <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]
          }
        ]
      };
      // use configuration item and data specified to show chart
      myChart.setOption(option);
 
      var canvas = document.getElementById('main');
      var dataURL = canvas.toDataURL();
 
      //console.log(dataURL);
 
      $('#exportButton').click(function () {
        var pdf = new jsPDF();
        pdf.addImage(dataURL, 'JPEG', 0, 0);
        pdf.save('download.pdf');
      });
    </script>
    <button id="exportButton" type="button">Export as PDF</button>
  </body>
</html>

有什么建议么？

看答案:

我也需要这个商业产品，所以直到找到解决方案之前，我才放弃。

您不能使用图表的ID来获取图像的URL，而需要搜索画布。

($('canvas')[0]).toDataURL("image/png");

请注意，“ [0]”表示，如果您有更多图表，它将为您的第一个画布提供：

($('canvas')[0]).toDataURL("image/png");
($('canvas')[1]).toDataURL("image/png");
($('canvas')[2]).toDataURL("image/png");

 在线测试看效果：https://raw.githack.com/MrRio/jsPDF/master/index.html#

posted on 2024-03-12 14:45  andydaopeng  阅读(83)  评论(0)  编辑  收藏  举报

导航