模板存放位置 模板限定xls后缀，xlsx会有时间问题
src/assets/excelTemplate/模板.xls
安装模块包

npminstallfile-loader --save-dev    //开发，Webpack 配置中使用它来处理文件加载npmi xlsx --save//生产，解析和处理 Excel 文件的库

新增配置，在vue.config.js中，自己比较一下，最后一段新增的chainWebpack

module.exports =defineConfig({transpileDependencies:true,assetsDir:'static',//打包配置文件parallel:false,publicPath:'./',devServer:{port:port,open:true,proxy:{'/api':{target:process.env.VUE_APP_BASE_URL,changeOrigin:true,ws:true,pathRewrite:{'^/api':'',},},},},configureWebpack:{name:name,resolve:{alias:{'@':resolve('src'),},},},chainWebpack(config){config.module      .rule('excel').test(/\.(xls|xlsx)$/).use('file-loader').loader('file-loader').options({name:'[name].[ext]',}).end()},})

即可将模板下载到本地

<template><el-button @click="downloadFile"icon="el-icon-download">下载配置模板</el-button></template><script>importexcelFile from'@/assets/excelTemplate/模板.xls'exportdefault{data(){return{}},methods:{//下载downloadFile(){constlink =document.createElement('a')link.href =excelFile      link.download ='模板.xls'link.style.display ='none'// 隐藏元素document.body.appendChild(link)// 添加到文档中link.click()document.body.removeChild(link)// 点击后移除},},}</script><style></style>

我使用XLSX的场景，在我上传excel的时候，我需要获取它的表头以及里面的数据进行渲染到表格中，在我编辑的时候需要请求Excel的地址，将返回流转JSON也拿里面的表格数据

封装公共的方法

/** * xlsx自身插件有bug，比如excel里17:00:00，从流获取会少了43s，跟时区有关，用下面2个无用，最好方法直接限制上传文件后最为xls即可，就不会出现时间偏差了 * @param  date * @returns */functionfixPrecisionLoss(date){constimportBugHotfixDiff =(()=>{constbasedate =newDate(1899,11,30,0,0,0);constdnthreshAsIs =(newDate().getTimezoneOffset()-basedate.getTimezoneOffset())*60000-1000;constdnthreshToBe =getTimezoneOffsetMS(newDate())-getTimezoneOffsetMS(basedate);returndnthreshAsIs -dnthreshToBe;})();returnnewDate(date.getTime()-importBugHotfixDiff);}functiongetTimezoneOffsetMS(date){vartime =date.getTime();varutcTime =Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),date.getMilliseconds());returntime -utcTime;}/** * 核心处理excel流，读取里面的数据 * @param  file * @param  callback * @param  XLSX * @param  dayjs */exportfunctionreadExcelFile(file,callback,XLSX,dayjs){constreader =newFileReader();reader.onload=event=>{constdata =event.target.result;letworkBook =XLSX.read(data,{type:'array',cellDates:true});try{constworksheet =workBook.Sheets[workBook.SheetNames[0]];console.log('🚀 ~ readExcelFile ~ worksheet:',worksheet);consttableHeader =getHeaderRowA(worksheet,XLSX);console.log('🚀 ~ readExcelFile ~ tableHeader:',tableHeader);constexcelData =XLSX.utils.sheet_to_json(worksheet,{raw:true,defval:'-'});excelData.forEach(obj=>{Object.keys(obj).forEach(v=>{if(obj[v]instanceofDate){obj[v]=dayjs((obj[v])).format('YYYY-MM-DD HH:mm:ss');}});});callback(null,{tableHeader,excelData });}catch(error){callback(error);}};reader.onerror=event=>{callback(event.error);};reader.readAsArrayBuffer(file);}/** * 获取excel的表头数组 * @param  sheet  工作簿 查看excel就知道有很多的sheet了一般读取[0]也就是第一个 * @param  XLSX 工具包 * @returns */functiongetHeaderRowA(sheet,XLSX){constheaders =[];// 定义数组，用于存放解析好的数据constrange =XLSX.utils.decode_range(sheet['!ref']);// 读取sheet的单元格数据letC;constR=range.s.r;/* start in the first row */for(C=range.s.c;C<=range.e.c;++C){/* walk every column in the range */constcell =sheet[XLSX.utils.encode_cell({c:C,r:R})];/* find the cell in the first row */lethdr ='UNKNOWN '+C;// <-- replace with your desired defaultif(cell &&cell.t)hdr =XLSX.utils.format_cell(cell);headers.push(hdr);}returnheaders;// 经过上方一波操作遍历，得到最终的第一行头数据}/** * 将excel的 Sun Feb 18 2024 11:53:44 GMT+0800日期格式化成这种格式YYYY-MM-DD HH:mm:ss * @param {} excelData * @returns */exportfunctionformatExcelDataA(excelData,dayjs){returnexcelData.map(obj=>{letnewObj ={};Object.keys(obj).forEach(v=>{if(obj[v]instanceofDate){newObj[v]=dayjs((obj[v])).format('YYYY-MM-DD HH:mm:ss');}else{newObj[v]=obj[v];}});returnnewObj;});}// 定义一个方法来转换表头数据格式，符合elementUi里的tableexportfunctiontransformTableHeader(tableHeader){returntableHeader.map((item,index)=>({label:item,prop:`propTable${index +1}`}));}// 定义一个方法来转换表格数据格式，符合elementUi里的dataexportfunctiontransformTableData(tableHeader,excelData){returnexcelData.map(item=>{letrowData ={};Object.keys(item).forEach(value=>{constpropItem =tableHeader.find(p=>p.label ===value);rowData[propItem.prop]=item[value];});return{...rowData };});}// 定义一个方法来处理表头标签,因为上传的带有*的必填，去掉展示exportfunctionprocessTableHeaderLabel(tableHeader){returntableHeader.map(obj=>{constlabel =obj.label.startsWith('*')?obj.label.slice(1):obj.label;return{...obj,label };});}

下面是调用，抽离核心需要的，仅供参考

<template><div><el-button @click="downloadFile"icon="el-icon-download">下载配置模板</el-button><el-upload ref="upload":limit="1"accept=".xls,.xlsx"class="upload-demo":action="upload.url":file-list="fileList":on-success="handleFileSuccess"><el-button type="primary"icon="el-icon-upload">上传xls文件</el-button></el-upload><el-card class="box-card"style="height: 250px"><div slot="header"class="clearfix"><span>数据展示</span></div><el-table ref="singleTable":data="tableData"highlight-current-row height="170"@current-change="handleCurrentChange"><el-table-column v-for="(item, index) in tableHeader":prop="item.prop":key="index":label="item.label"show-overflow-tooltip></el-table-column></el-table></el-card></div></template><script>// npm install file-loader --save-dev    //开发，Webpack 配置中使用它来处理文件加载// npm i xlsx --save					          //生产，解析和处理 Excel 文件的库importexcelFile from'@/assets/excelTemplate/模板.xls'import*asXLSXfrom'xlsx'importdayjs from'dayjs'import{readExcelFile,formatExcelDataA,transformTableHeader,transformTableData,processTableHeaderLabel }from'@/views/common/index.js'//算法模块公用方法lUCKY封装exportdefault{data(){return{tableHeader:'',tableData:'',responseName:'',responseUrl:'',//上传的列表fileList:[],// 上传参数upload:{url:'http://192.168.15.115:3737/luckyNwa/uploadPicLocal',// 请求地址},}},methods:{//上传之前的限制beforeUpload(file){console.log('🚀 ~ beforeUpload ~ file:',file)constvalidFormats =['.xls','.xlsx']constfileFormat =file.name.slice(file.name.lastIndexOf('.')).toLowerCase()if(!validFormats.includes(fileFormat)){this.$message.error('只能上传xls或xlsx文件')returnfalse// 阻止文件上传}returntrue// 允许文件上传},//下载downloadFile(){constlink =document.createElement('a')link.href =excelFile      link.download ='模板.xls'link.style.display ='none'// 隐藏元素document.body.appendChild(link)// 添加到文档中link.click()document.body.removeChild(link)// 点击后移除},/** 文件上传成功处理 */handleFileSuccess(response,f,fileList){this.isUpload =truethis.$refs.upload.clearFiles()this.responseUrl =f.response.data      console.log('🚀 ~ handleFileSuccess ~ this.responseUrl:',this.responseUrl)this.responseName =f.raw.name      constfile =f.raw //获取上传的文件console.log('🚀 ~ handleFileSuccess ~ file:',file)// this.$modal.msgSuccess('上传成功');if(file){this.isFileDeal(file)}},//处理excelisFileDeal(file){readExcelFile(file,(error,data)=>{if(error){console.log('里面的tryCatch捕获的异常：'+error)this.beforeRemove()this.$modal.msgWarning('表格数据不能为空！')}else{consttableHeader =data.tableHeader ||[]constexcelData =data.excelData ||[]if(excelData.length ===0||excelData ===null){this.beforeRemove()this.$modal.msgWarning('表格数据不能为空！')return}console.log('读取的excel表头数据（第一行）',tableHeader)console.log('读取所有excel数据',excelData)//这里进一步验证里面的数据，必填的里面不能为空也就是-letemptyFields =newSet()excelData.forEach((item)=>{if(item['*曲线名称']==='-'&&item['*水位(m)']==='-'&&item['*流量(m³/s)']==='-'&&item['*测站编码']==='-'){emptyFields.add('测站编码、曲线名称、