当前位置：首页 > VUE

vue实现导出excel实现流程

2026-01-08 03:57:40VUE

安装依赖库

需要安装 xlsx 和 file-saver 库来处理 Excel 文件的生成和保存。通过 npm 或 yarn 安装：

npm install xlsx file-saver
# 或
yarn add xlsx file-saver

创建导出功能函数

在 Vue 组件中创建一个方法，用于将数据转换为 Excel 文件并下载。以下是一个通用实现示例：

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  methods: {
    exportToExcel() {
      // 假设要导出的数据为数组格式
      const data = [
        ['姓名', '年龄', '城市'],
        ['张三', 25, '北京'],
        ['李四', 30, '上海']
      ];

      // 创建工作簿和工作表
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成 Excel 文件并保存
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, '导出数据.xlsx');
    }
  }
}

处理动态数据

通常需要从 API 或组件状态中获取动态数据。以下示例展示如何处理动态数据：

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    };
  },
  methods: {
    exportToExcel() {
      // 转换对象数组为二维数组（表头 + 数据）
      const headers = Object.keys(this.tableData[0]);
      const data = [headers, ...this.tableData.map(item => Object.values(item))];

      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      saveAs(blob, '动态数据.xlsx');
    }
  }
}

自定义文件名和样式

可以通过以下方式自定义文件名和简单样式：

exportToExcel() {
  const fileName = `用户数据_${new Date().toLocaleDateString()}.xlsx`;
  const data = [['姓名', '年龄'], ...this.tableData.map(item => [item.name, item.age])];

  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.aoa_to_sheet(data);

  // 设置列宽
  worksheet['!cols'] = [{ wch: 20 }, { wch: 10 }];
  XLSX.utils.book_append_sheet(workbook, worksheet, '用户数据');

  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(blob, fileName);
}

处理复杂数据结构

若数据包含嵌套对象，需先扁平化处理：

const flattenData = this.tableData.map(item => ({
  name: item.name,
  age: item.age,
  '地址省份': item.address?.province,
  '地址城市': item.address?.city
}));

const headers = Object.keys(flattenData[0]);
const data = [headers, ...flattenData.map(item => Object.values(item))];

vue实现导出excel实现流程