Vue实现Excel预览性能
前言：
我的项目中常常能遇到要求预览excel文件的需要，上面分享一下罕用的办法以及可能遇到的问题。
应用场景：
通过解析excel性能，实现PDF导入时的预览
首先咱们用到了XLSX（sheetJs）这个库来解决Excel类型的文件
地址：
https://docs.sheetjs.com/
https://www.npmjs.com/package/xlsx
反对大部分的古代浏览器版本
具体应用：
下载： npm i xlsx
首先咱们获取一Excel类型的文件。
这里我间接用了el-upload组件返回的文件
而后应用FileReader读取文件，注册初始化onload办法，并且在其onload办法中应用xlsx库解决文件;
- 首先应用xlsx的read办法，配置解决的详情。
const workbook = XLSX.read(data, { type: "binary", cellText: false, cellDates: true, });- 再轮询读取文件
for (let sheet in workbook.Sheets) { //循环读取每个文件 const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { header: 1, }); const sheetArray = XLSX.utils.sheet_to_json( workbook.Sheets[sheet], // 配置单元的数据转换方法，dateNF不失效 { raw: true, cellDates: true, dateNF: "yyyy/mm/dd" } ); //若以后sheet没有数据，则continue if (sheetArray.length == 0) { continue; } this.tableHeader = header[0]; this.handleNetX(sheetArray, header[0]); } } catch (e) { this.$message.warning("上传失败"); }留神sheet_to_json办法中此时cellDates配置为true之后，如果excel文件内的数据类型为工夫，会被转成Date格局。
官网文档中容许配置dateNF来进行工夫格式化，然而理论应用起来并没有成果。
所以针对工夫格局的解决，笔者这里间接转为Date格局，在后续过程中进行了手动解决。
咱们初始化load办法后，将excel文件源文件，转为bolb格局，在塞给fileReader.readAsBinaryString，进行文件解决办法的执行。
const blob = new Blob([file.raw]); fileReader.readAsBinaryString(blob);最初轮询sheetArray来进行数据的二次解决，最初失去前端能够应用的Array类型的文件，展现在页面中或者展现在表单中。
工夫格局解决
解决工夫的办法写的比较简单，次要就是判断了Date的object类型，来格式化日期类型
handleNetX(sheetArray, header) { const totalTable = []; for (let index in sheetArray) { let row = {}; header.map(index1 => { const tempKey = this.mapTableTitle[index1]; if (typeof sheetArray[index][index1] === "object") { row[tempKey] = this.handleExcelDate(sheetArray[index][index1]); } else { row[tempKey] = sheetArray[index][index1]; } }); totalTable.push(row); } this.tableData = totalTable; }, handleExcelDate(date) { if (!date) { return; } return formatDate(date.getTime(), "YYYY/MM/DD"); },代码总结：
async handleChangePre(file) { this.file = file; this.showResult = false; const fileReader = new FileReader(); fileReader.onload = ev => { try { const data = ev.target.result; const workbook = XLSX.read(data, { type: "binary", cellText: false, cellDates: true, }); for (let sheet in workbook.Sheets) { //循环读取每个文件 const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { header: 1, }); const sheetArray = XLSX.utils.sheet_to_json( workbook.Sheets[sheet], { raw: true, cellDates: true, dateNF: "yyyy/mm/dd" } ); //若以后sheet没有数据，则continue if (sheetArray.length == 0) { continue; } this.tableHeader = header[0]; console.log(sheetArray, "sheetArray"); this.handleNetX(sheetArray, header[0]); } } catch (e) { this.$message.warning("上传失败"); } }; const blob = new Blob([file.raw]); fileReader.readAsBinaryString(blob); },