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

落魄程序员在线炒粉

已于 2022-06-08 15:31:44 修改

阅读量2.4k

点赞数 3

分类专栏：前端开发文章标签：前端 vue.js javascript

于 2021-03-30 15:36:27 首次发布

本文链接：https://blog.csdn.net/qq_17229141/article/details/115326739

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

放一下npm上面的图

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

npm：

npm install xlsx 或者 npm i xlsx

yarn:

yarn add xlsx

3、在Vue组件中使用

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

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

<div>
    <a-upload
        :file-list="dataGrid.fileList"
        :remove="handleRemove"
        :before-upload="beforeUpload"
         accept=".xlsx,.xls">
            <a-button> <a-icon type="upload" /> Select Excel File </a-button>
    </a-upload>
</div>

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数组中就是读取到的内容