echarts数据Excel表格极速导出，无需再苦恼

2024-01-24 08:28:09

echarts 数据导出 Excel：前端速成指南

echarts 以其数据可视化功能而备受推崇，但在导出数据为 Excel 表格时却常让人头疼。本文将提供一个简单易行的前端解决方案，助您轻松解决此难题。

准备工作

首先，我们需要安装两个包：file-saver 和 xlsx。在终端中输入以下命令：

npm install file-saver
npm install xlsx

代码实现

接下来，在组件中导入这两个包：

import FileSaver from "file-saver";
import XLSX from "xlsx";

重写 echarts 的 dataview 方法：

export default {
  methods: {
    exportExcel() {
      const data = this.echartsInstance.getData();
      const options = {
        fileName: 'my_data', // 导出的 Excel 文件名
        sheetName: 'sheet1', // 导出的 Excel 表格名
      };
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, options.sheetName);
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([wbout], { type: 'application/octet-stream' });
      FileSaver.saveAs(blob, options.fileName + '.xlsx');
    },
  },
};

使用方法

最后，在需要导出 Excel 表格时，调用 exportExcel 方法即可：

this.exportExcel();

代码示例

<template>
  <div>
    <echarts ref="echartsInstance" :options="options"></echarts>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import * as echarts from 'echarts'
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  setup() {
    const echartsInstance = ref(null)

    const options = {
      // echarts 图表配置
    }

    const exportExcel = () => {
      const data = echartsInstance.value.getData();
      const options = {
        fileName: 'my_data', // 导出的 Excel 文件名
        sheetName: 'sheet1', // 导出的 Excel 表格名
      };
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, options.sheetName);
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([wbout], { type: 'application/octet-stream' });
      FileSaver.saveAs(blob, options.fileName + '.xlsx');
    }

    return {
      echartsInstance,
      options,
      exportExcel
    }
  }
}
</script>