vue实现前端excel的导出

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

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

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

1. ​​安装依赖​​

   npm install xlsx
   

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

   <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是最佳选择。 ​​实现步骤：​​

1. ​​安装依赖​​

   npm install exceljs file-saver
   

2. ​​在组件中使用​​

   <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，而不关心复杂格式，这个专用插件会让过程变得极其简单。 ​​实现步骤：​​

1. ​​安装依赖​​

   npm install vue-json-excel
   

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

   import Vue from 'vue';
   import JsonExcel from 'vue-json-excel';
   
   Vue.component('downloadExcel', JsonExcel);
   

3. ​​在组件中使用​​

   <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方法即可 。

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