uniapp vue3 读取excel

### 实现 UniApp 和 Vue3 下读取 Excel 文件功能 在 UniApp 和 Vue3 的开发环境中，可以借助第三方库来实现读取 Excel 文件的功能。以下是详细的解决方案： #### 使用 SheetJS (xlsx) 库 SheetJS 是一个非常流行的 JavaScript 库，用于处理 Excel 文件（`.xls` 或 `.xlsx`）。它支持解析、生成以及操作 Excel 数据[^1]。 ##### 安装依赖 可以通过 npm 来安装 `xlsx` 插件： ```bash npm install xlsx --save ``` ##### 导入并初始化 在项目中导入该库，并编写相应的逻辑代码： ```javascript import XLSX from 'xlsx'; // 处理文件上传事件 function handleFileUpload(event) { const file = event.target.files[0]; if (!file) return; // 创建 FileReader 对象以读取文件内容 const reader = new FileReader(); reader.onload = function(e) { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个工作表名称 const sheetName = workbook.SheetNames[0]; // 将工作表转换为 JSON 格式数据 const worksheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(worksheet); console.log('Excel Data:', jsonData); // 输出解析后的数据 }; reader.readAsArrayBuffer(file); } ``` ##### 绑定到前端组件 可以在页面模板中绑定文件输入框的 change 事件： ```html <template> <view> <input type="file" @change="handleFileUpload" /> </view> </template> <script> export default { methods: { handleFileUpload(event) { // 调用之前定义的方法 handleFileUpload(event); } } }; </script> ``` 以上方法适用于 H5 平台下的文件上传场景。如果需要适配小程序环境，则需额外注意文件路径获取方式的不同之处。 --- #### 在小程序端使用 uni-app 提供的 API 对于微信小程序或其他平台的小程序，在实际应用中可能无法直接通过 HTML `<input>` 元素选择本地文件。此时可利用 `uni.chooseImage()` 方法选取图片形式保存的 Excel 表格或者调用微信云存储服务完成文件传输后再做进一步处理[^2]。 示例代码如下所示： ```javascript uni.chooseMessageFile({ count: 1, type: 'all', success(res) => { const tempFilePaths = res.tempFiles; // 假设选中的就是目标 Excel 文档 const filePath = tempFilePaths[0].path; // 加载文件内容至内存缓冲区 plus.io.resolveLocalFileSystemURL(filePath, entry => { entry.file(fileObj => { let fr = new FileReader(); fr.onload = e => { var data = new Uint8Array(fr.result); // 解析 Excel 文件 const wb = XLSX.read(data, {type:'array'}); const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; const json_data = XLSX.utils.sheet_to_json(ws,{header:1}); console.log(json_data); }; fr.readAsArrayBuffer(fileObj); }); }, err => { console.error(err.message); }); }, }); ``` 此部分主要针对 Android/iOS 设备上的原生能力进行了封装扩展，从而实现了跨平台兼容性更强的应用方案设计思路[^3]。 --- ### 注意事项 - **性能优化**：当面对超大规模的数据集时，应考虑分页加载策略减少一次性渲染压力。 - **安全性验证**：确保只允许合法类型的文档被提交上来以免遭受恶意攻击风险。 - **用户体验改进**：提供清晰的操作指引帮助用户顺利完成整个流程体验更佳效果。 ---