vue对excel表格的前端处理上传表格解析

需求

需求是在需要上传excel表格进行解析，然后获取其中的数据，刚开始想的是后端来处理数据，后来发现了xlsx这个插件，综合了一下前端实现了。

代码

HTML：

      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleChange"
        multiple
        :show-file-list="false"
      >
        <el-button type="primary" style="margin-right:10px">点击上传EXCEL表格</el-button>
      </el-upload>

数据：

fileList: [],
file: "",

methods：

    handleChange(file, fileList) {
      this.fileList = [fileList[fileList.length - 1]]; // 只能上传一个Excel，重复上传会覆盖之前的
      this.file = file.raw;
      let reader = new FileReader();
      let _this = this;
      reader.readAsArrayBuffer(this.file);
      reader.onload = function() {
        debugger
        let buffer = reader.result;
        let bytes = new Uint8Array(buffer);
        let length = bytes.byteLength;
        let binary = "";
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        let XLSX = require("xlsx");
        let wb = XLSX.read(binary, {
          type: "binary"
        });
        let outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        //outdata是表格的数据，以下是我对实际业务进行的处理。
        let links = [];
        let str = "";
        let objkey=Object.keys(outdata[0])[Object.keys(outdata[0]).length-1]
        links.push(objkey)
        outdata.forEach(v => {
          links.push(v[objkey]);
        });
        links.forEach(v => {
          str = str + v + "\n";
        });
        _this.textarea = str;
      };
    },

之后就可以进行数据的处理

anythingelse

参考博客：
https://blog.csdn.net/weixin_44521565/article/details/109363299
xlsx文档：
https://www.npmjs.com/package/xlsx