1 解析excel的公共方法

//解析文件内容
export const fileAnalysis = (e) => {
	return new Promise((resolve, reject) => {
		this.fileTemp = e.target.files[0];
		if(this.fileTemp){
			if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
				|| (this.fileTemp.type == 'application/vnd.ms-excel') || (this.fileTemp.type == '')){
				let obj = this.fileTemp;
				let _this = this;
				//let inputDOM = this.$refs.inputer;
				// 通过DOM取文件数据
				this.file = event.currentTarget.files[0];
				let rABS = false; //是否将文件读取为二进制字符串
				let f = this.file;
				let reader = new FileReader();
				//if (!FileReader.prototype.readAsBinaryString) {
				FileReader.prototype.readAsBinaryString = function(f) {
					let binary = "";
					let rABS = false; //是否将文件读取为二进制字符串
					let pt = this;
					let wb; //读取完成的数据
					let outdata;
					let reader = new FileReader();
					reader.onload = function(e) {
						let bytes = new Uint8Array(reader.result);
						let length = bytes.byteLength;
						for (let i = 0; i < length; i++) {
							binary += String.fromCharCode(bytes[i]);
						}
						//此处引入，用于解析excel
						let XLSX = require("xlsx");
						if (rABS) {
							wb = XLSX.read(btoa(fixdata(binary)), {
								//手动转化
								type: "base64"
							});
						} else {
							wb = XLSX.read(binary, {
								type: "binary",
								cellDates: true,
							});
						}
						outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
						//outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
						//此处可对数据进行处理
						resolve(outdata);
					};
					reader.readAsArrayBuffer(f);
				};
				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			} else {
				Vue.prototype.$message({
					type:'warning',
					message:'附件格式错误，请删除后重新上传！'
				});
			}
		} else {
			Vue.prototype.$message({
				type: 'warning',
			});
		}
	});
}

2 引用方法

//选中文件
    async selectedFile(e) {
      await fileAnalysis(e).then((res) => {
      	console.log(res)
        let dataNum = 0;
        let dataList = this.tabData.dataDetail;
        this.tabData.dataDetail = [];
        res.map((v) => {
					console.log(v)
        });
      });
    },

3 说明

        打印的res是一个List<Map<String, Object>>集合, excel中一行数据为一个Map，Map的Key值就是excel的标题，多行数据组成一个List集合，案需求处理即可

导入Excel

1. 定义 html元素（安装依赖 npm install xlsx --save）

   <input
          type="file"
          style="display:none"
          ref="file"
          @change="getFileData"
   />    
   <!--定义一个按钮 触发事件为 chooseFile-->
   <el-button type="primary" @click=“chooseFile”>导入</el-button>
   
   <!-- 记得导入xlsx-->
   import XLSX from "xlsx";
   

2. 定义方法

    //选择文件
   chooseFile() {
       this.$refs.file.dispatchEvent(new MouseEvent("click"));
   },
   //获取解析后的数据
   getFileData() {
       let _this = this;
       let params = [];
       const inputFile = this.$refs.file.files[0];
       if (inputFile) {
           if (
               inputFile.name.indexOf(".xlsx") == -1 &&
               inputFile.name.indexOf(".xls") == -1
           ) {
               this.$message.error("模板文件类型不正确！", 3);
               return;
           }
           const reader = new FileReader();
           reader.readAsBinaryString(inputFile);
           reader.onload = function(e) {
               var workbook = XLSX.read(e.target.result, { type: "binary" });
               for (let sheet in workbook.Sheets) {
                   if (workbook.Sheets.hasOwnProperty(sheet)) {
                       params = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                       console.log("参数是神马？");
                       console.log(params);
                       break;
                   }
               }
               _this.$refs.file.value = null;
               _this.batchImport(_this.parseData())
           };
       }
   },
   // parseData方法功能：将excel中数据解析为一个数组
   // batchImport()  括号中的数据就是格式化好的数据list 方法中传给后台即可
   parseData() {
       let _this = this;
       params.shift();
       const data = [];
       params.forEach(item => {
           const obj = {};
           obj.itemName = _this.checkEmpty(item["测试一"],item["__rowNum__"] - 1,"测试一",1);
           obj.voltName = _this.checkEmpty(item["测试二"],item["__rowNum__"] - 1,"测试二",4); //表格中的展示的数据
           obj.voltLevel = importDataMatch.getDataKey(importDataMatch.importVoltList,item["测试二"]) || "";//给后台传编码
           obj.feaAppDInvest = item["测试二级表头"] || "";
           obj.sanctionLine = item["__EMPTY"] || "";
           obj.sanctionCapability = item["__EMPTY_1"] || "";
           obj.apprFileNo = item["__EMPTY_2"] || "";
           obj.feaAppDate = _this.checkDate(item["__EMPTY_3"],item["__rowNum__"] - 1,"时间1",18);
           obj.hzDInvest = item["测试二级表头"] || ""; 
           obj.hzLine = item["__EMPTY_4"] || "";
           obj.hzCapality = item["__EMPTY_5"] || "";
           obj.approvalReplyNum = item["__EMPTY_6"] || "";
           obj.hzReplyDate =  _this.checkDate(item["__EMPTY_7"],item["__rowNum__"] - 1,"时间2",23); 
           data.push(obj);
       });
       return data;
   },
   checkEmpty(data, index, name, column){
         if(data == undefined || (data+"").trim() == ""){
           this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】必填的字段未填,请重新设置！`)
           throw '导入失败！'
         }else {
           return (data+"").trim();
         }
   },
   //参数： 数据  行号 字段名称 列号 是否判空
   checkNum(num, index, name, column, emptyFlag) {
       if(emptyFlag){
           if(num == undefined){
               this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】必填的字段未填,请重新设置！`)
               throw '导入失败！'
           }
       }
       const reg = /[^\d\.]/;
       if (reg.test(num)) {
           this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】填写格式不正确,应该填写数字，请重新设置！`);
           throw '导入失败！'
       }
       const temp = parseFloat(num);
       if (isNaN(temp)) {
           this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】填写格式不正确,应该填写数字，请重新设置！`);
           throw '导入失败！'
       } else {
           return temp.toFixed(4);
       }
   },
   checkDate(date, index, name, column, emptyFlag) {
       if(emptyFlag){
           if(date == undefined){
               this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】必填的字段未填,请重新设置！`);
               throw '导入失败！'
           }
       }
       date = this.formatDate(date,'-')
       var DATE_FORMAT = /^[0-9]{4}-[0-1]?[0-9]{1}-[0-3]?[0-9]{1}$/; //判断是否是日期格式
       if(!DATE_FORMAT.test(date)){
           this.tipMessage(`导入失败<br><br>第[${index}]行，第[${column}]个单元格，【${name}】日期格式不正确,请重新设置！`);
           throw '导入失败！'
       } else {
           return date;
       }
   },
   // 格式化日期 读取excel中日期格式会变成一个数字 numb为读取到的值  format是格式样式 ‘-’或‘/’
   formatDate(numb, format) {
       const time = new Date((numb - 1) * 24 * 3600000 + 1)
       time.setYear(time.getFullYear() - 70)
       const year = time.getFullYear() + ''
       const month = time.getMonth() + 1 + ''
       const date = time.getDate() - 1 + ''
       if (format && format.length === 1) {
           return year + format + month + format + date
       }
       return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
   },　
   tipMessage(content){
       this.$messageElement({
           message: content,
           type: 'info',
           dangerouslyUseHTMLString: true,
       });
   },
   

3. 表格样式：
   

前端Vue导入Excel复杂多级表头、导出复杂表头

一般情况下都是有我们的后端来操作这个文件的读写,但总有特殊情况嘛,就比如我公司后台人员配置较少,没时间…,于是我就自己开始鼓捣了,先展示一下成果,上图:

表格导入效果(需要自己处理一下数据格式)

导出效果:

复杂表头(合并单元格)导入实现过程

1.首先我们的excel的导入导出都是依赖于js-xlse实现的,在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据

2.通过这个插件给我们读到的excel格式是这样子的 worksheet:

之后通过github给我们提供的api使用文档可发现,官方给我们提供了很丰富的使用函数工具如图(我们主要会用到图中红色的框内的:

sheet_to_json()

已经帮助我们把之前的数据格式拼成对象th与td对应的数据格式了


但是,只可以是适用于简单的没有合并单元格的表头进行导入:
下面我们再来试试比较复杂的表头进行导入:

转化为:

这样数据就很明显的对应不上了,所以我们的思路就是找到他的源码改一下sheet_to_json方法实现我们的复杂表头导入.

不知道你们的编辑器用的是什么,我用的webstrom查看这个sheet_to_json()
源码就会给我跳到ts源码里,看不到真正的源码,后来我还是打的debugger在Source里找到的源代码,各位大佬都可以自己尝试着改一下源码试试

经过了长达三天的努力,效果最终达到了,效果就是本文章最顶部的图.

在这里卖个关子哈,作者也是刚毕业一年的小菜鸡,相较本平台的大佬啥也不是,如果你想要这种导入复杂表格的效果,可以加我扣扣免费获取,让我也知道我的代码对你们有所帮助,嘿嘿…导出复杂表头的就自己百度把,导出的有很多人写.
QQ:1774420802 加备注csdn