Vue + Ant Design Vue实现前端解析Excel文件

1、前端需要安装 xlsx 这个插件

放一下npm上面的图

2、安装需要的插件，使用如下命令安装

npm：

npm install xlsx 或者 npm i xlsx

yarn:

yarn add xlsx

3、在Vue组件中使用

前端界面如下，上传一个文件，解析出来excel内容

4、Ant上传组件代码如下：

    
              Select Excel File 
    

5、 上传前做一些处理并且调用读取：

 

6、 js处理上传的文件代码如下：

handleReadExcel (file) {
      const that = this
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const fileData = ev.target.result
          const workbook = XLSX.read(fileData, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0] // 取第一张表
          const snArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // console.log(snArr) // 读取到的SN列表
          // 遍历SN放入Set集合 snSet
          that.dataGrid.snSet.clear() // 清空一下之前的Set
          snArr.forEach(item => {
            that.dataGrid.snSet.add(item.sn)
          })
          // console.log(that.dataGrid.snSet)
          // 处理完SN列表之后可以开放OK按钮
          this.enableSubmit = false
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    }

snArr数组中就是读取到的内容