使用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#

 

echarts 字符云、词云图  echarts-wordcloud

posted on   andydaopeng  阅读(112)  评论(0)  编辑  收藏  举报

相关博文：
· echarts报表生成pdf文件
· jsPDF 文字、图片生成PDF(解决中文乱码)
· vue 导出HTML页面（包含echarts）为PDF
· fabricjs如何导入echarts
· 基于Qt+Echart实现图表绘制及PDf打印
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2013-03-12 Mysql存储过程

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛