使用 exceljs 导出数据为 Excel 文件

在 Vue3 中使用 exceljs 导出数据为 Excel 文件的步骤如下：

---

1. 安装依赖

首先安装 exceljs 和 file-saver（用于保存文件）：

npm install exceljs file-saver

---

2. 创建导出工具函数

在项目中创建一个工具函数（如 exportToExcel.js），用于生成 Excel 文件并触发下载。

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

/**
 * 导出数据为 Excel 文件
 * @param {Array} data - 要导出的数据
 * @param {Array} headers - 表头配置
 * @param {string} fileName - 文件名（不含扩展名）
 */
export const exportToExcel = async (data, headers, fileName = 'export') => {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet 1');

  // 添加表头
  worksheet.columns = headers.map(header => ({
    header: header.title, // 表头显示名称
    key: header.key,      // 数据字段名
    width: header.width || 20, // 列宽（可选）
  }));

  // 添加数据行
  data.forEach(item => {
    worksheet.addRow(item);
  });

  // 生成 Excel 文件
  const buffer = await workbook.xlsx.writeBuffer();

  // 保存文件
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, `${fileName}.xlsx`);
};

---

3. 在 Vue 组件中使用

在 Vue 组件中调用导出函数。

示例代码：

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

<script setup>
import { ref } from 'vue';
import { exportToExcel } from './utils/exportToExcel';

// 模拟数据
const data = ref([
  { id: 1, name: '张三', age: 25, department: '技术部' },
  { id: 2, name: '李四', age: 30, department: '市场部' },
  { id: 3, name: '王五', age: 28, department: '财务部' },
]);

// 表头配置
const headers = [
  { title: 'ID', key: 'id', width: 10 },
  { title: '姓名', key: 'name', width: 20 },
  { title: '年龄', key: 'age', width: 10 },
  { title: '部门', key: 'department', width: 30 },
];

// 导出逻辑
const handleExport = () => {
  exportToExcel(data.value, headers, '员工信息');
};
</script>

---

4. 功能说明

• 表头配置 ：headers 定义了 Excel 文件的表头，title 是显示名称，key 是对应数据的字段名。
• 数据格式 ：data 是一个对象数组，每个对象的字段名需要与 headers 中的 key 对应。
• 文件保存 ：使用 file-saver 的 saveAs 方法将生成的 Excel 文件保存到本地。

---

5. 扩展功能

5.1 自定义样式

可以为表头或数据行添加样式：

// 设置表头样式
worksheet.getRow(1).eachCell(cell => {
  cell.font = { bold: true, color: { argb: 'FFFFFF' } };
  cell.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: '4F81BD' },
  };
  cell.alignment = { vertical: 'middle', horizontal: 'center' };
});

// 设置数据行样式
worksheet.eachRow((row, rowNumber) => {
  if (rowNumber > 1) {
    row.eachCell(cell => {
      cell.font = { size: 12 };
      cell.alignment = { vertical: 'middle', horizontal: 'left' };
    });
  }
});

5.2 合并单元格

合并单元格示例：

worksheet.mergeCells('A1:D1'); // 合并 A1 到 D1
worksheet.getCell('A1').value = '员工信息表';

5.3 导出图片

如果需要导出图片，可以使用 addImage 方法：

const imageId = workbook.addImage({
  filename: 'path/to/image.png',
  extension: 'png',
});
worksheet.addImage(imageId, 'A10:B15');

---

6. 注意事项

1. 数据量较大时 ：如果数据量较大（如超过 10 万行），建议分批次写入或使用流式写入（stream.xlsx）。
2. 浏览器兼容性 ：file-saver 依赖浏览器的 Blob 和 URL.createObjectURL，现代浏览器均支持。
3. 性能优化：对于复杂表格，尽量减少样式操作，避免性能问题。

---

7. 完整代码

以下是完整的工具函数和组件代码：

工具函数 (exportToExcel.js)

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export const exportToExcel = async (data, headers, fileName = 'export') => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet 1');

  // 添加表头
  worksheet.columns = headers.map(header => ({
    header: header.title,
    key: header.key,
    width: header.width || 20,
  }));

  // 添加数据行
  data.forEach(item => {
    worksheet.addRow(item);
  });

  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, `${fileName}.xlsx`);
};

Vue 组件

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

<script setup>
import { ref } from 'vue';
import { exportToExcel } from './utils/exportToExcel';

const data = ref([
  { id: 1, name: '张三', age: 25, department: '技术部' },
  { id: 2, name: '李四', age: 30, department: '市场部' },
  { id: 3, name: '王五', age: 28, department: '财务部' },
]);

const headers = [
  { title: 'ID', key: 'id', width: 10 },
  { title: '姓名', key: 'name', width: 20 },
  { title: '年龄', key: 'age', width: 10 },
  { title: '部门', key: 'department', width: 30 },
];

const handleExport = () => {
  exportToExcel(data.value, headers, '员工信息');
};
</script>

---

通过以上步骤，你可以在 Vue3 项目中轻松实现数据导出为 Excel 文件的功能！

内容为ai生成，不喜勿喷