正文

教你轻松导出echarts图表为PDF，快速保存美观报告

/0 浏览量
0709

在数据分析、可视化展示的过程中，ECharts 作为一款强大的图表库，被广泛应用于各种场合。有时候，你可能需要将生成的 ECharts 图表导出为 PDF 格式，以便于分享或保存。下面，我将一步步教你如何轻松地将 ECharts 图表导出为 PDF，并保存为美观的报告。

准备工作

首先，确保你已经引入了 ECharts 库到你的项目中。以下是一个简单的引入方式：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

步骤一：初始化图表

在 HTML 中创建一个用于显示图表的容器，并初始化一个 ECharts 实例：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    // ... 图表配置项
  };
  myChart.setOption(option);
</script>

步骤二：添加导出 PDF 功能

为了导出图表为 PDF，我们可以借助 html2canvas 和 jsPDF 这两个库。首先，你需要引入这两个库：

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

然后，为你的图表添加一个导出 PDF 的按钮，并绑定点击事件：

<button onclick="exportPDF()">导出为 PDF</button>
<script>
  function exportPDF() {
    html2canvas(document.getElementById('main')).then(function(canvas) {
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;

      // 一页 PDF 可显示的图表大小
      var onePageWidth = 841.98; // 单位 mm
      var onePageHeight = 595.28; // 单位 mm

      // 计算分页数
      var pageHeight = (onePageWidth * contentHeight) / contentWidth;
      var canScale = (onePageHeight) / contentHeight;

      var scale = canScale;
      if (scale < 1) {
        scale = 1;
      }

      var canvasWidth = contentWidth / scale;
      var canvasHeight = contentHeight / scale;

      var pdf = new jspdf.jsPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: [canvasWidth, canvasHeight]
      });

      pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, canvasWidth, canvasHeight);

      pdf.save('ECharts_Chart.pdf');
    });
  }
</script>

步骤三：保存为美观的报告

在导出 PDF 后，你可以根据需要调整图表的大小、字体、背景等样式，以达到美观的报告效果。以下是一些基本的调整方法：

  1. 调整图表大小：通过修改 canvasWidth 和 canvasHeight 的值来调整图表大小。
  2. 设置页面边距：在 jspdf 的构造函数中，可以设置 margin 属性来调整页面边距。
  3. 添加标题和页脚：使用 pdf.addTitle() 和 pdf.addFooter() 方法添加标题和页脚。

通过以上步骤，你就可以轻松地将 ECharts 图表导出为 PDF，并保存为美观的报告了。希望这篇文章能帮助你解决实际问题，让你在工作中更加得心应手！

-- 展开阅读全文 --