当前位置：首页 > VUE

vue实现网页导出excel

2026-01-21 20:50:58VUE

Vue 实现网页导出 Excel

在 Vue 项目中，可以通过以下方法实现将数据导出为 Excel 文件。常用的库包括 xlsx 和 file-saver。

安装依赖

确保项目中已安装 xlsx 和 file-saver：

npm install xlsx file-saver --save

基本实现方法

引入所需库 在 Vue 组件中引入 xlsx 和 file-saver：

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

准备数据 假设需要导出的数据是一个数组对象：

data() {
return {
 tableData: [
   { name: '张三', age: 25, gender: '男' },
   { name: '李四', age: 30, gender: '女' }
 ]
};
}

导出 Excel 函数 创建一个方法将数据转换为 Excel 文件并下载：

methods: {
exportToExcel() {
 const worksheet = XLSX.utils.json_to_sheet(this.tableData);
 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/octet-stream' });
 saveAs(blob, 'data.xlsx');
}
}

调用导出方法 在模板中添加一个按钮触发导出：
```
<button @click="exportToExcel">导出 Excel</button>
```

自定义文件名和表头

如果需要自定义文件名或表头，可以修改数据格式：

exportToExcel() {
  const headers = ['姓名', '年龄', '性别'];
  const data = this.tableData.map(item => [item.name, item.age, item.gender]);
  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...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/octet-stream' });
  saveAs(blob, 'custom_data.xlsx');
}

导出特定表格内容

如果需要导出页面中的表格内容，可以通过表格的 DOM 元素直接转换：

exportTableToExcel() {
  const table = document.getElementById('tableId');
  const worksheet = XLSX.utils.table_to_sheet(table);
  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/octet-stream' });
  saveAs(blob, 'table_data.xlsx');
}

导出多个工作表

如果需要导出多个工作表，可以重复添加工作表到工作簿：

vue实现网页导出excel

exportMultipleSheets() {
  const workbook = XLSX.utils.book_new();
  const worksheet1 = XLSX.utils.json_to_sheet(this.tableData1);
  const worksheet2 = XLSX.utils.json_to_sheet(this.tableData2);
  XLSX.utils.book_append_sheet(workbook, worksheet1, 'Sheet1');
  XLSX.utils.book_append_sheet(workbook, worksheet2, 'Sheet2');
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(blob, 'multi_sheet_data.xlsx');
}

通过以上方法，可以灵活地在 Vue 项目中实现 Excel 导出功能。