vue3使用XLSX

### 集成 XLSX 实现 Excel 文件的导入与导出 #### 安装依赖包 为了在 Vue3 项目中使用 `xlsx` 进行 Excel 的导入和导出操作，首先需要安装必要的 npm 包。可以通过命令行工具执行以下指令完成安装： ```bash npm install xlsx file-saver --save ``` 此过程会下载并保存两个库到项目的 node_modules 目录下：一个是用于处理 Excel 数据的核心库 `xlsx`；另一个是辅助保存文件至本地磁盘的 `file-saver`。 #### 创建服务函数模块 创建一个新的 JavaScript 或 TypeScript 文件作为服务于整个应用的服务层组件，比如命名为 `excelService.js` 或者 `excel.service.ts`。在这个文件里定义好用来读写 Excel 文档的方法。 对于 **导出** 功能来说，在该文件内编写如下所示的代码片段[^2]: ```javascript import FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; const exportJsonToExcel = (multiHeader = [], header, data, filename) => { const worksheetData = [ ...multiHeader, [...header], ...data.map(item => header.map(key => item[key]) ) ]; const ws = XLSX.utils.aoa_to_sheet(worksheetData); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'SheetJS'); /* generate file and send to client */ XLSX.writeFile(wb, `${filename}.xlsx`); }; export default { exportJsonToExcel }; ``` 而对于 **导入** 功能，则需添加额外的功能来解析上传的 Excel 文件: ```javascript // 继续在同一文件 excelService.js 中... async function importExcel(file){ return new Promise((resolve,reject)=>{ let reader = new FileReader() try{ reader.onload = e=>{ var data = new Uint8Array(e.target.result) var workbook = XLSX.read(data,{type:'array'}) // 假设只有一张工作表 let firstSheetName = workbook.SheetNames[0]; let worksheet = workbook.Sheets[firstSheetName]; resolve(XLSX.utils.sheet_to_json(worksheet)) } reader.readAsArrayBuffer(file.raw || file) }catch(error){ reject(error)} }) } export default {... , importExcel}; ``` 上述代码实现了基本的数据转换逻辑，其中包含了将 JSON 转换成适合于 Excel 表格结构化数组的能力以及从二进制流反序列化回原始数据记录集的过程。 #### 使用服务函数 最后一步是在实际业务场景下的视图组件内部调用这些封装好的接口来进行具体的操作。例如在一个按钮点击事件处理器里面触发导出动作或将用户选择过的文件传递给对应的导入方法去加载内容。 通过这种方式就可以轻松地把复杂的表格编辑能力融入基于 Vue 构建的应用程序当中去了。