在项目中上传excel文件是很常见的,那如何解析其内容呢,一起来看看吧:
-
按钮
<input type="file" name="file" id="file" accept=".xls, .xlsx" background="none" @change="uploadFile"/>请上传文件
-
事件
async uploadFile(event) { const file = event.target.files[0]; const types = file.name.split(".")[1]; const fileType = ["xlsx", "xls"].some((item) => item === types); if (!fileType) { return this.$snackbar().showError("文件类型错误,请重新选择"); //注意此处的$snackbar()是vuetify框架中的组件,此处改为自己使用的组件即可 } let fileList = []; let tabJson = await this.file2Xce(file); if (tabJson && tabJson.length > 0) { this.xlsxJson = tabJson; fileList = this.xlsxJson[0].sheet; event.target.value = ""; // 解决上传相同附件只传一次问题,可以参考博文:https://blog.csdn.net/weixin_43363871/article/details/106716737 } }, file2Xce(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function (e) { const data = e.target.result; this.wb = XLSX.read(data, { type: "binary", }); const result = []; const sheet2JSONOpts = { defval: "", //给defval赋值为空的字符串 }; this.wb.SheetNames.forEach((sheetName) => { result.push({ sheetName: sheetName, sheet: XLSX.utils.sheet_to_json( this.wb.Sheets[sheetName], sheet2JSONOpts //当excel内容为空时若不加此属性没有相应的字段,可以取消试试效果 ), }); }); resolve(result); }; reader.readAsBinaryString(file); }); },
注 意 \color{red}{注意} 注意:以上代码设置即使上传文件内容为空也会显示字段的关键代码是
const sheet2JSONOpts = { defval: ""};
-
execle内容
-
解析结果