vue2下载excel

### Vue2 实现导出 Excel 功能 在 Vue2 中实现导出 Excel 的功能可以通过 `exceljs` 库完成。此库提供了强大的 API 来创建、修改和保存 Excel 文件，同时支持复杂的样式定义以及数据处理[^2]。 以下是基于 Vue2 和 `exceljs` 的具体实现方法： #### 安装依赖 首先需要安装 `exceljs` 及其文件流处理插件： ```bash npm install exceljs file-saver --save ``` #### 导入必要的模块 在组件中导入所需的模块并初始化函数逻辑： ```javascript import { saveAs } from 'file-saver'; import * as ExcelJS from 'exceljs'; export default { methods: { exportExcel() { const workbook = new ExcelJS.Workbook(); // 创建一个新的工作簿实例 const worksheet = workbook.addWorksheet('Sheet Name'); // 添加一个新表单 // 设置头部标题 worksheet.addRow(['ID', 'Name', 'Age']); // 插入一些模拟数据 const dataRows = [ ['1', 'Alice', '25'], ['2', 'Bob', '30'] ]; dataRows.forEach(rowData => { worksheet.addRow(rowData); }); // 将工作簿转换为二进制字符串 workbook.xlsx.writeBuffer().then(buffer => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 转换为Blob对象 saveAs(blob, 'example.xlsx'); // 使用FileSaver.js保存文件 }).catch(error => console.error('Error exporting:', error)); } } } ``` 上述代码实现了以下功能： - 创建了一个新的 Excel 工作簿。 - 向其中添加了一张名为 `'Sheet Name'` 的表格。 - 表格设置了三列：`['ID', 'Name', 'Age']` 并填充了一些示例数据。 - 最终通过 `writeBuffer()` 方法将整个文档序列化成缓冲区，并将其作为二进制文件下载到本地设备上[^1]。 #### 关键点说明 1. **Type 参数的重要性** 当调用 `xlsx.write` 函数时，务必指定 `type='binary'` 或者使用其他合适的类型（如 buffer），这一步骤对于确保生成有效的 Binary 字符串至关重要。 2. **跨浏览器兼容性** 如果目标环境涉及旧版 IE 浏览器，则需额外注意 FileSaver.js 是否完全适配该版本；现代主流浏览器通常无需特殊调整即可正常运行。 3. **性能优化建议** 对于大规模数据集操作而言，应考虑分页加载或者异步渲染策略减少内存占用压力。 --- ### 示例效果预览 执行上面的方法后会触发浏览器弹窗提示用户保存命名为 `"example.xlsx"` 的 Excel 文档至计算机硬盘驱动器位置。 ---