前端解析读取excel

前端解析excel

记得先安装xlsx插件
在这里我是在on-change事件中做的监听解析excel
(可以直接复制，直接用)

npm install xlsx --save

直接上代码（只用看on-change事件）

 <el-upload
      v-loading="isLoading"
      ref="upload"
      :auto-upload="true"
      :headers="headers"
      :on-change="onChange"
      :on-success="handleSuccess"
      :file-list="fileList"
      :limit="1"
      :show-file-list="true"
      :action="cmsApi.excelUploadApi"
      class="ele-import-upload-uploader"
      drag>
      <i class="el-icon-upload"/>
      <div class="el-upload__text">
        将填写后的文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

onChange(e) {
      const fr = new FileReader()
      fr.readAsDataURL(e.raw)
      var f = e.raw
      var that = this
      var reader = new FileReader()
      reader.onload = function(e) {
        // console.log(e)
        let wb = that.wb
        var data = e.target.result
        if (that.rABS) {
          wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
            type: 'base64'
          })
        } else {
          wb = XLSX.read(data, {
            type: 'binary'
          })
        }
        // wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        // wb.Sheets[Sheet名]获取第一个Sheet的数据
        // document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
        const data1 = JSON.parse(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
        console.log(data1)
        return
      }
      if (this.rABS) {
        reader.readAsArrayBuffer(f)
      } else {
        reader.readAsBinaryString(f)
      }
    },

excel和最后的结果如下
这是excel
这是解析后的结果

拿到每一个单元格所对应的键值对了，之后想做什么操作就比较自由了