现学现用，轻松将Vue表格导出成Excel表格！

2024-01-11 10:24:48

在实际项目开发中，经常需要将表格数据导出为Excel表格，以便进行进一步的数据分析和处理。在Vue项目中，实现表格数据导出Excel的功能非常简单，只需要安装三个依赖包，并在项目中进行简单的配置即可。

1. 安装依赖包

首先，需要在项目中安装三个依赖包：

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

file-saver：用于保存文件到本地。
xlsx：用于将数据导出为Excel表格。
script-loader：用于加载外部脚本文件。

2. 项目文件结构

在项目中新建一个文件夹，如excel，用于存放导出的Excel表格相关的文件。在该文件夹下新建两个文件：

export.js：导出Excel表格的脚本文件。
template.xlsx：Excel表格模板文件。

3. 导出Excel表格脚本文件

在export.js文件中，编写以下代码：

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const exportExcel = (data, fileName) => {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  FileSaver.saveAs(blob, fileName + '.xlsx');
};

export default exportExcel;

4. Excel表格模板文件

在template.xlsx文件中，创建一个简单的Excel表格模板，包括表头和数据区域。

5. 在Vue组件中使用

在需要导出Excel表格的Vue组件中，导入exportExcel函数，并调用该函数导出数据。

import exportExcel from './excel/export';

export default {
  methods: {
    exportExcel() {
      const data = [{ name: 'John', age: 30 }, { name: 'Mary', age: 25 }];
      exportExcel(data, 'test');
    }
  }
};