解析出excel中的内容

姊妹篇：vue中实现：解压zip，解析excel页签内容，并实现附件上传

本文章只纪录上传单个excel时，将页签中的内容由前端解析出来的功能。

采用原生input的方法实现。

1.html

<div @click="upload">上传</div>
<input 
    type="file"
    @change="performanceUploadProcess"
    ref="inputer" 
    v-show="false"
 />  
<!-- 是否确认上传弹框 -->
<!-- 此处使用的是Ant Design  Vue 组件-->
 <a-modal
       v-model="determine "
       title="上传确认"
       @ok="sure"
       @cancel="clockConfirm"
   >
       <p>获取文件信息成功，点击确定将进行上传</p>
   </a-modal>

2.js

npm i xlsx

import XLSX from "xlsx";

data() {
    return {
          uploadList: [],//excel解析出的需要上传的数据
          determine: false,//是否确认上传弹框
      }
},

methods: {
	 //1.用VUE按钮代替input原生按钮并触发
	folderButtonClick(){
	   this.$refs.inputer.click();
	 },
	 //2.判断文件类型-读取excel数据
	performanceUploadProcess() {
        this.uploadList = [];
        let inputDOM = this.$refs.inputer;
        this.file = inputDOM.files;
        const fileName = inputDOM.files[0].name;
        const fileType = fileName.substr(fileName.lastIndexOf(".") + 1);
        if (fileType !== "xlsx") {
            this.$message.error("上传文件类型错误，请重新上传");
            return false;
        } 
        const reader = new FileReader();
        reader.onload = (e) => {
            let excelData = e.content;
            const workbook = XLSX.read(excelData, { type: "binary" });
            if (workbook.Sheets) {
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                //导入
                if(data.length==0){
                    this.$message.error("上传文件为空或未上传，请确认文件");
                    return false;
                }
                if (data[0][0] === "根据第一个单元格，判断是规定的excel表") {
                    const genuineData = data.filter((r) => r.length != 0);
                    for (let i = 1; i < genuineData.length; i++) {
                        //保存时需要传的参数
                        const entity = {
                            name: genuineData[i][0],
                            id: genuineData[i][1],
                            sex: genuineData[i][2],
                            old: genuineData[i][3],
                            (...更多的数据)
                        };
                        this.uploadList.push(entity);
                    }
                    this.uploadList = this.uploadList.map((r) => ({ ...r }));
                    this.determine = true;
                } else {
                    this.$message.error("上传文件类型错误，请检查");
                }
            }
        };
        reader.readAsBinaryString(this.file[0]);
	},
	 //确定
	 pfMarkConfirm() {
	     this.determine = false;
	     //调取保存和上传接口
	  },
	//解读文档
	  configFileReader() {
	     FileReader.prototype.readAsBinaryString = function (fileData) {
	          var binary = "";
	          var pt = this;
	          var reader = new FileReader();
	          reader.onload = function (e) {
	              console.log("配置", e);
	              var bytes = new Uint8Array(reader.result);
	              var length = bytes.byteLength;
	              for (var i = 0; i < length; i++) {
	                  binary += String.fromCharCode(bytes[i]);
	              }
	              pt.content = binary;
	              pt.onload(pt); //页面内data取pt.content文件内容
	          };
	          reader.readAsArrayBuffer(fileData);
	      };
	  },
},
mounted() {
   //记得初始化哦
   this.configFileReader();
}