【纯前端实现xlsx的解析并处理成table需要的格式】

devtools/2024/10/11 7:09:38/

概要

xlsx纯前端导入并解析成json

整体架构流程

xlsx导入并解析成json，并与table中的数据进行对比，根据唯一标识更新对应数据项

技术名词解释

vue2
xlsx

技术细节

首先下载xlsx依赖

javascript">npm install xlsx --save

然后在需要导入xlsx的地方

在这里插入图片描述
这里主要用input弹出选择文件框这里的导入按钮自己可以用自己的按钮
需要初始化的数据

javascript">data(){return{tableData:[]}
}

这个方法很重要，展示选择文件框

javascript">triggerFileInput(){this.$refs.fileInput.click();
}

然后开始解析xlsx内容

javascript">handleFileUpload(event) {const file = event.target.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });// 处理数据this.processData(jsonData);};reader.readAsArrayBuffer(file);}},

jsonData格式是这样的

javascript">[["变量名", "描述", "计算方式"],["abcd", "婚姻状况", "async"],["abcde", "婚姻状况", "sync"]
]

然后就是最关键的一步，把这个数据处理成 [{}] ,标准的数组对象格式，我要处理的数据是个表格的数据，大致长这样，这也是tableData的数据

javascript">tableData:[{"vvv": 333,"varName": "abcd","sort": "内部","nnn": null,"vvv": null,"ccc": null,"aaa": "derivative","dataType": "Integer","version": 1,"description": "测试","templateld": 5454,"templateName": "mmm","dataSource": "报告","explanation": "gg","status": 1,"createDate": "2024-09-13 17:16:46","history ld": 3232,"calculation": "sync"}
]

“变量名”, “描述”, “计算方式”，分别对应上面的varName，description，description字段
接下来就是处理方法了

javascript">processData(jsonData) {// 取得 Excel 数据（跳过标题行）const excelData = jsonData.slice(1);// 将 Excel 数据转换为对象数组const updatedData = excelData.map(row => {return {varName: row[0] ? row[0].replace(/\n/g, '') : '', // 去除换行符 description: row[1] || '', // 如果 row[1] 不存在，返回空字符串calculation: row[2] || '' // 如果 row[2] 不存在，返回空字符串};});// 更新 tableDatathis.tableData.forEach(baseItem => {const matchedItem = updatedData.find(item => item.varName === baseItem.varName);if (matchedItem) {baseItem.description = matchedItem.description;baseItem.calculation = matchedItem.calculation;}});
},,