Element-UI配合xlsx提取Excel中的数据

配合Element中的el-upload组件进行提取Excel中的数据

XLSX使用：

1.npm install xlsx
2.import XLSX from "xlsx"

核心代码

	/**
     * @description: 导入excel并进行数据提取
     * @return: 
     */
    Vue.prototype.$importExcel = function (file, header) {
      let _this = this;
      return new Promise(function (resolve, reject) {
        const types = file.name.split('.')[1]
        const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
        if (!fileType) {
          _this.$message({
            type: "warning",
            message: "文件格式不正确，请重新选择!"
          });
          reject();
        }
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const wsname = this.wb.SheetNames[0];
          const ws = this.wb.Sheets[wsname];
          /* Convert array of arrays */
          const sheetJson = XLSX.utils.sheet_to_json(ws);
          let tableData = []; //转换为真正的table所需要的数据
          //excel转为json数据，记住header中的label一定要和excel中的表头汉字一致，不然无法匹配
          for (let item of sheetJson) {
            let obj = {};
            for (let key in item) {
              for (let childItem of header) {
                if (key === childItem.label) {
                  obj[childItem.prop] = item[key];
                  break;
                }
              }
            }
            tableData.push(obj);
          }
          resolve(tableData);
        };
        reader.readAsBinaryString(file.raw);
      });
    }

使用

html:

<el-upload
          action
          class="importExcel upload-demo"
          ref="upload"
          :auto-upload="false"
          :file-list="fileList"
          :show-file-list="false"
          :on-change="change"
        >
          <el-button size="mini">导 入</el-button>
        </el-upload>

js

 change(file) {
      this.$importExcel(file, this.headers).then(tableData => {
        console.log(tableData);
      });
    }

headers:

  headers: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "年龄",
          prop: "age"
        }
      ]

要提取数据的excel:

提取结果 从excel中提取到两条数据

以上就是结合ElementUi 提取Excel数据的用法。其中headers中的label一定要和excel中的列明一致

后记:

后面遇到IE中某些方法不兼容的问题
说明=>FileReader中readAsBinaryString方法在IE中使用报错以及替代方法

所以readAsBinaryString(file.raw)要替换为readAsArrayBuffer(file.raw);
因为替换为Buffer了，所以onload相应的XLSX读取到的数据类型也要做出变化
查看XLSX

所以使用type为buffer的类型即可

 this.wb = XLSX.read(data, {
            type: "buffer"
          });

咻咻~