当前位置：首页 > VUE

vue实现导出excel实现流程

2026-03-28 03:25:54VUE

vue实现导出excel实现流程

安装依赖

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

npm install xlsx file-saver --save

引入库

在需要导出Excel的Vue组件中引入相关库：

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

准备数据

确保数据是一个数组，每个元素是一个对象，键为表头，值为单元格内容：

vue实现导出excel实现流程

const data = [
  { name: '张三', age: 25, gender: '男' },
  { name: '李四', age: 30, gender: '女' }
];

转换数据格式

将数据转换为Excel工作表格式：

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

生成Excel文件并下载

使用XLSX.write生成文件，并通过saveAs保存：

vue实现导出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');

完整示例代码

以下是一个Vue组件的完整实现示例：

<template>
  <button @click="exportToExcel">导出Excel</button>
</template>

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

export default {
  methods: {
    exportToExcel() {
      const data = [
        { name: '张三', age: 25, gender: '男' },
        { name: '李四', age: 30, gender: '女' }
      ];
      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' });
      saveAs(blob, '导出数据.xlsx');
    }
  }
};
</script>

自定义表头

如果需要自定义表头，可以通过修改数据对象的键名或使用XLSX.utils.aoa_to_sheet方法：

const headers = [['姓名', '年龄', '性别']];
const body = data.map(item => [item.name, item.age, item.gender]);
const worksheet = XLSX.utils.aoa_to_sheet([...headers, ...body]);

处理复杂数据

对于嵌套对象或数组，需先扁平化数据：

const flattenedData = data.map(item => ({
  name: item.name,
  age: item.age,
  gender: item.gender,
  address: item.address.city // 假设address是嵌套对象
}));

通过以上步骤，可以在Vue项目中实现Excel文件的导出功能。