vue实现前端excel的导出

在Vue项目中实现前端Excel导出功能，主要有三种主流方案，各有特点。你可以根据项目的复杂度和需求来选择最适合的一种。下面这个表格清晰地对比了它们的核心特性。

特性	SheetJS (xlsx)	exceljs	vue-json-excel (插件)
易用性	高，API简洁	中，功能强大但稍复杂	极高，开箱即用
功能强度	强，支持常见操作	极强，支持样式、图片、公式等	较弱，适合简单数据导出
包大小	较小	较大	小
适用场景	快速实现标准数据导出	需要复杂格式、自定义样式的报表	快速为JSON数据添加导出功能

💡 方案一：使用 SheetJS (xlsx) - 最轻量灵活

这是最常用的一种方案，在功能和易用性之间取得了很好的平衡。 实现步骤：

安装依赖
复制代码
```
npm install xlsx
```

在组件中使用 下面是使用 Vue 3 的 <script setup>语法示例：

xml 复制代码

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

<script setup>
import { ref } from 'vue';
import { utils, writeFile } from 'xlsx';

// 示例数据
const jsonData = ref([
  { name: '张三', age: 25, job: '前端开发' },
  { name: '李四', age: 30, job: '后端开发' }
]);

const exportToExcel = () => {
  // 1. 将JSON数据转换为工作表
  const worksheet = utils.json_to_sheet(jsonData.value);
  // 2. 创建新工作簿并追加工作表
  const workbook = utils.book_new();
  utils.book_append_sheet(workbook, worksheet, '员工列表');
  // 3. 写入并下载文件
  writeFile(workbook, '员工数据.xlsx');
};
</script>

如果你的数据是二维数组（如带自定义表头），可以使用 utils.aoa_to_sheet(data)方法。

优点 ：文档丰富，社区活跃，足够应对大部分导出场景。 缺点：直接设置单元格样式等高级功能相对复杂。

🎨 方案二：使用 exceljs - 功能最强大

如果你的报表需要复杂的格式，如设置字体、颜色、边框、合并单元格、插入图片或公式，exceljs是最佳选择。 实现步骤：

安装依赖
复制代码
```
npm install exceljs file-saver
```

在组件中使用

ini 复制代码

<template>
  <button @click="handleExport">导出精美报表</button>
</template>

<script setup>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const tableData = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 }
];

const handleExport = async () => {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('员工表');

  // 设置列定义和表头
  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: '姓名', key: 'name', width: 20 },
    { header: '年龄', key: 'age', width: 10 }
  ];

  // 设置表头样式
  const headerRow = worksheet.getRow(1);
  headerRow.font = { bold: true, color: { argb: 'FFFFFF' } };
  headerRow.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: '4F81BD' }
  };

  // 添加数据行
  tableData.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, '带样式的员工数据.xlsx');
};
</script>

你还可以利用它轻松实现合并单元格 （worksheet.mergeCells('A1:D1')）等功能。

优点 ：对Excel的支持最为全面，可以创建高度定制化的报表。 缺点：包体积相对较大，API也更复杂。

⚡ 方案三：使用 vue-json-excel 插件 - 最快速

如果你的唯一目标是将Vue组件内的JSON数据快速导出为Excel，而不关心复杂格式，这个专用插件会让过程变得极其简单。 实现步骤：

安装依赖
复制代码
```
npm install vue-json-excel
```

全局注册组件（通常在 main.js 中）

javascript 复制代码

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

在组件中使用

xml 复制代码

<template>
  <download-excel
    :data="jsonData"
    :fields="jsonFields"
    name="导出数据.xlsx">
    <button>导出 Excel</button>
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      // 定义Excel表头（中文）与数据字段的映射
      jsonFields: {
        '姓名': 'name',
        '年龄': 'age',
        '职位': 'job'
      },
      // 数据
      jsonData: [
        { name: '张三', age: 25, job: '前端开发' },
        { name: '李四', age: 30, job: '后端开发' }
      ]
    };
  }
};
</script>

这个组件会自动处理所有转换和下载逻辑，你只需要配置好数据和字段映射即可。

优点 ：集成度最高，使用最简单，几行代码即可完成。 缺点：灵活性最低，无法自定义格式。

📝 实践建议与常见问题

大数据量处理：当数据量非常大（例如超过10万行）时，纯前端导出可能会消耗大量内存导致浏览器卡顿。在这种情况下，应考虑使用后端导出服务。
数字格式问题 ：导出的Excel中，长数字（如身份证号）可能会被自动转换为科学计数法。解决方法是在生成单元格数据时，在其后添加制表符 \t将其强制转换为文本格式，或者使用 exceljs为单元格显式设置文本格式。
导出多个工作表 ：无论是 xlsx还是 exceljs，都支持创建多个工作表。只需重复创建工作表并调用 book_append_sheet或 addWorksheet方法即可。

希望这份详细的对比和指南能帮助你做出选择。如果你的报表有特别复杂的设计需求，比如需要多层表头、特定配色或插入图表，我可以为你提供更具体的实现示例。