sheetjs uniapp
时间: 2025-06-07 13:42:13 浏览: 20
### 如何在 UniApp 中使用 SheetJS 进行表格处理
要在 UniApp 中集成并使用 SheetJS (也称为 `xlsx`) 来实现电子表格的读取和写入功能,可以按照以下方法操作:
#### 安装依赖项
首先,在项目中安装 `xlsx` 库。可以通过 npm 或 yarn 将其引入到项目的 dependencies 中。
```bash
npm install xlsx --save
```
或者,
```bash
yarn add xlsx
```
完成安装后,可以在页面组件或其他模块中导入该库。
---
#### 导入库文件
在需要使用的页面或公共工具类中加载 `xlsx` 模块:
```javascript
import * as XLSX from 'xlsx';
```
注意:如果遇到打包体积过大问题,可考虑按需加载部分核心功能来优化性能。
---
#### 数据导出为 Excel 文件
以下是通过 SheetJS 创建一个简单的 Excel 表格并将数据保存至本地设备的例子:
```javascript
export function exportToExcel(dataArray) {
const worksheet = XLSX.utils.json_to_sheet(dataArray); // 转换 JSON 数组成工作表
const workbook = XLSX.utils.book_new(); // 新建空白的工作簿实例
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 添加工作表到工作簿里,并命名标签页名称为'Sheet1'
/* Generate binary string representing file */
let wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
try {
saveAs(new Blob([wbout], {type:"application/octet-stream"}), "example.xlsx");
} catch(e){
console.error('Error exporting data:', e);
}
}
```
上述函数接受参数 `dataArray` 是一个标准 JavaScript 对象数组形式的数据源[^1]。调用此函数会触发下载动作,生成名为 `"example.xlsx"` 的文件供用户存储于移动终端上。
> **提示**: 需要额外引入 polyfill 支持某些浏览器环境下的 FileSaver 功能才能正常运行上面提到的 `saveAs()` 方法。
---
#### 解析上传的 Excel 文件内容
当允许前端接收来自用户的 .xls/.xlsx 类型文档时,则需要用到如下逻辑解析其中所含的信息:
```javascript
function handleFile(event) {
var files = event.target.files;
var reader = new FileReader();
reader.onload = function(e) {
var data = new Uint8Array(e.target.result);
/* Read workbook */
var workbook = XLSX.read(data, {type:'array'});
/* Extract first sheet name */
var firstSheetName = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[firstSheetName];
/* Convert to JSON array */
var jsonData = XLSX.utils.sheet_to_json(worksheet,{raw:true});
console.log(jsonData); // 输出转换后的JSON结构化数据
};
reader.readAsArrayBuffer(files[0]);
}
// HTML Input Element Example:
<input id="fileInput" type="file" accept=".xlsx,.xls"/>
document.getElementById('fileInput').addEventListener('change',handleFile,false);
```
这里展示了如何监听 input change 事件获取目标文件流,并利用 `Uint8Array` 和 `readAsArrayBuffer` API 把二进制数据传递给 `XLSX.read` 函数进一步分析得到原始记录列表[^2]。
---
#### 注意事项
由于移动端应用框架可能对原生 DOM 接口存在兼容性差异,因此实际开发过程中还需测试不同平台的表现效果是否一致。另外考虑到用户体验方面因素,建议设置最大允许上传大小限制以及验证 MIME-Type 是否匹配预期格式的要求[^3]。
---
阅读全文
相关推荐


















