当前位置：首页 > VUE

使用vue实现excel下载

2026-02-22 07:35:08VUE

使用 Vue 实现 Excel 下载

在 Vue 中实现 Excel 下载功能，可以通过前端库（如 xlsx 或 file-saver）将数据转换为 Excel 文件并触发下载。以下是具体实现方法：

安装依赖库

确保项目中已安装 xlsx 和 file-saver 库。若未安装，可通过以下命令安装：

npm install xlsx file-saver --save

实现 Excel 导出功能

准备数据
假设需要导出的数据为一个数组，每个元素是对象形式：

const data = [
  { name: '张三', age: 25, department: '技术部' },
  { name: '李四', age: 30, department: '市场部' }
];

生成 Excel 文件并下载
使用 xlsx 将数据转换为工作簿（Workbook），再通过 file-saver 保存为文件：

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

export function exportToExcel(data, fileName = 'data.xlsx') {
  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  // 将数据转换为工作表
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 生成 Excel 文件二进制数据
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  // 转换为 Blob 并触发下载
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, fileName);
}

在 Vue 组件中调用
在按钮点击事件或其他触发逻辑中调用导出函数：

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

<script>
import { exportToExcel } from './excel-export';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, department: '技术部' },
        { name: '李四', age: 30, department: '市场部' }
      ]
    };
  },
  methods: {
    handleExport() {
      exportToExcel(this.tableData, '员工列表.xlsx');
    }
  }
};
</script>

高级功能扩展

自定义表头
若需自定义 Excel 表头（如中文字段名），可先转换数据格式：

const headers = { name: '姓名', age: '年龄', department: '部门' };
const dataWithHeaders = data.map(item => ({
  姓名: item.name,
  年龄: item.age,
  部门: item.department
}));
exportToExcel(dataWithHeaders);

多工作表导出
支持导出多个工作表到同一 Excel 文件：

const workbook = XLSX.utils.book_new();
const sheet1 = XLSX.utils.json_to_sheet(data1);
const sheet2 = XLSX.utils.json_to_sheet(data2);
XLSX.utils.book_append_sheet(workbook, sheet1, 'Sheet1');
XLSX.utils.book_append_sheet(workbook, sheet2, 'Sheet2');

后端数据导出
若数据量较大，建议通过后端生成 Excel 文件并返回下载链接。前端只需调用接口：
```
axios.get('/api/export-excel').then(response => {
  window.location.href = response.data.downloadUrl;
});
```