概要
xlsx纯前端导入并解析成json
整体架构流程
xlsx导入并解析成json，并与table中的数据进行对比，根据唯一标识更新对应数据项
技术名词解释
- vue2
- xlsx
技术细节
- 首先下载xlsx依赖
npm install xlsx --save
- 然后在需要导入xlsx的地方
这里主要用input弹出选择文件框 这里的导入按钮自己可以用自己的按钮
需要初始化的数据
data(){return{tableData:[]}
}
- 这个方法很重要，展示选择文件框
triggerFileInput(){this.$refs.fileInput.click();
}
- 然后开始解析xlsx内容
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格式是这样的
[["变量名", "描述", "计算方式"],["abcd", "婚姻状况", "async"],["abcde", "婚姻状况", "sync"]
]
- 然后就是最关键的一步，把这个数据处理成 [{}] ,标准的数组对象格式，我要处理的数据是个表格的数据，大致长这样，这也是tableData的数据
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字段
接下来就是处理方法了
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;}});
},,
注* varName: row[0] ? row[0].replace(/\n/g, '') : '', // 去除换行符
这里很关键，因为直接解析xlsx,处理成的数据带换行符/n,所有刚开始怎么都替换数据不成功，因为数据带/n
- 这里的数据就已经替换成功了，这里其实是批量修改数据，因为是根据varName进行匹配的，如果有不匹配也需要导入的需求自己修改一下逻辑就行。
小结
纯前端实现xlsx的解析并处理成标准table需要的格式