正文

教你一招！轻松用echarts导出图表成PDF，告别手动排版烦恼

/0 浏览量
0721

在这个数据可视化的时代，ECharts 作为一款强大的可视化库，被广泛应用于各种场景中。然而，在使用 ECharts 制作图表时，你是否曾经遇到过需要将图表导出为 PDF 格式，但手动排版又显得十分麻烦的情况？今天，就让我来教你一招，轻松用 ECharts 导出图表成 PDF，告别手动排版的烦恼。

一、ECharts 导出 PDF 的原理

ECharts 导出 PDF 的原理其实很简单，就是利用 ECharts 内置的 getPdfCanvasDataURL 方法，将图表转换为一个 PDF 可用的 canvas 数据 URL，然后再通过 JavaScript 的 fetch API 获取这个数据 URL，并使用 PDF.js 库将其转换为 PDF 文件。

二、准备工作

在开始之前，请确保你已经：

  1. 引入了 ECharts 和 PDF.js 库。
  2. 创建了一个 ECharts 实例并绘制了图表。

三、实现步骤

以下是一个简单的示例，展示如何使用 ECharts 导出图表成 PDF：

// 1. 引入 ECharts 和 PDF.js
import * as echarts from 'echarts';
import * as pdfjsLib from 'pdfjs-dist';

// 2. 创建 ECharts 实例并绘制图表
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  // ... ECharts 配置项
};
myChart.setOption(option);

// 3. 获取图表的 PDF 数据 URL
myChart.getPdfCanvasDataURL({
  margin: [20, 20, 20, 20], // 可选，设置图表边距
}, function (canvasDataUrl) {
  // 4. 使用 PDF.js 获取 PDF 数据
  pdfjsLib.getDocument({
    data: canvasDataUrl,
  }).promise.then(function (pdf) {
    // 5. 获取 PDF 页面
    pdf.getPage(1).then(function (page) {
      // 6. 创建 PDF 渲染上下文
      const scale = 1.5; // 可选，设置 PDF 页面缩放比例
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.createElement('canvas');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      const context = canvas.getContext('2d');
      // 7. 渲染 PDF 页面到 canvas
      page.render({ canvasContext: context, viewport: viewport }).promise.then(function () {
        // 8. 将 canvas 转换为图片
        const img = new Image();
        img.src = canvas.toDataURL('image/png');
        img.onload = function () {
          // 9. 创建 PDF 文件
          const pdfDoc = pdfjsLib.getDocument({ data: canvasDataUrl });
          pdfDoc.promise.then(function (pdf) {
            // 10. 添加页面到 PDF 文件
            pdf.addPage(viewport);
            // 11. 保存 PDF 文件
            pdf.save('图表.pdf');
          });
        };
      });
    });
  });
});

四、总结

通过以上步骤，你就可以轻松地将 ECharts 图表导出为 PDF 格式，告别手动排版的烦恼。当然，这只是一个简单的示例，实际应用中你可能需要根据具体情况进行调整。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --