引入插件
import * as XLSX from "xlsx/xlsx.mjs";import { read, utils } from 'xlsx/xlsx.mjs';上传文件方法
// 上传文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 async handle(ev) { //改变表格key值 this.$refs.cpkTable.loading = true; this.$refs.cpkLine.myChart.showLoading({ text: "加载中...", color: "#1890ff", textColor: "#1890ff", showSpinner: false, maskColor: "rgba(255, 255, 255, 0.7)",}); this.tableKey = true; this.file = ev.raw; this.excelName = this.file.name; //截取表格文件名 this.excelName = this.excelName.substring( 0, this.excelName.lastIndexOf(".") ); console.log("上传的未解析源文件", this.file); if (!this.file) { console.log("文件打开失败"); return; } else { //<!-- 用来解析表头的代码--> // let data = await this.readFile(file); // let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据 // console.log("二进制数据的解析:", workbook); // let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet // // 调用解析表头方法 // this.getHeader(worksheet); // let result = XLSX.utils.sheet_to_json(worksheet); //转换为json数据格式 // console.log("最终解析的 json 格式数据:", result); // this.tableData = result; // // 调用处理表头函数 // this.setTable(); //<!-- 用来解析表头的代码--> // 读取 Excel 文件 //<!-- 不需要解析表头的代码--> const file = this.file; const reader = new FileReader(); const that = this reader.onload = function(e) { const data = new Uint8Array(e.target.result); const workbook = read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const jsonData = utils.sheet_to_json(worksheet, { header: 1, raw: false, defval: '' }); // const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); that.tableData = jsonData that.lineData = jsonData // 在这里处理读取到的数据 }; reader.readAsArrayBuffer(file); that.fileOpen = false that.$refs.cpkLine.lineData = this.tableData; that.LSL = this.form.lsl that.MBZ = this.form.targetValue that.USL = this.form.usl setTimeout(()=>{ that.$message.success(this.excelName+'导入成功') that.$refs.upload.clearFiles(); that.$refs.cpkTable.loading = false; that.$refs.cpkLine.myChart.hideLoading(); },800) // that.tableLength = that.tableData.length // this.setTable() //<!-- 不需要解析表头的代码--> } },解析获取到表头的数据
getHeader(sheet) { // const XLSX = XLSX; const headers = []; const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围 let C; /* 获取单元格值 start in the first row */ const R = range.s.r; // 行 // C 列 let i = 0; for (C = range.s.c; C <= range.e.c; ++C) { var cell = sheet[ XLSX.utils.encode_cell({ c: C, r: R }) ]; /* 根据地址得到单元格的值find the cell in the first row */ var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default // XLSX.utils.format_cell 生成单元格文本值 if (cell && cell.t) hdr = XLSX.utils.format_cell(cell); if (hdr.indexOf("UNKNOWN") > -1) { if (!i) { hdr = "__EMPTY"; } else { hdr = "__EMPTY_" + i; } i++; } headers.push(hdr); } // 保存至data中 this.excelHeader = headers; return headers; },设置中英文映射 就是字段对应
// 设置表格中英文映射 setTable() { const headers = this.excelHeader; const excellist = this.tableData; const tableTitleData = []; // 存储表格表头数据 const tableMapTitle = {}; // 设置表格内容中英文对照用 headers.forEach((_, i) => { tableMapTitle[_] = "cord" + i; tableTitleData.push({ prop: "cord" + i, label: _, width: 100, }); }); console.log("表格头标题：", tableTitleData); // 映射表格内容属性名为英文 const newTableData = []; excellist.forEach((_) => { const newObj = {}; Object.keys(_).forEach((key) => { newObj[tableMapTitle[key]] = _[key]; }); newTableData.push(newObj); }); this.tableColumn = tableTitleData; this.tableData = newTableData; },