vue实现页面导入excel文件

目的： 通过点击页面上的一个导入excel文件的按钮，将选中的excel的文件导入，然后拿到文件中的内容。

实现步骤：

1.  页面上放一个按钮，用一个type为file的input标签（它是一个用于导入文件的dom）css定位在按钮上然后可以通过opacity:0 隐藏掉input标签，这样的话看着是点击了按钮实则是点击了input标签。

代码如下：

<el-button type="primary" size="mini">导入Excel</el-button>
<input class="file" type="file" accept=".xls,.xlsx" v-if="isShow" @change="readExcel($event)" />

 

2. 通过点击input标签导入excel文件后触发事件，对数据进行处理，其中用到了xlsx，需要先进行下载（npm i xlsx），在需要的地方进行引用（import  * as XLSX from ''xlsx/xlsx.mjs''）,

主要代码如下：

readExcel (e) {
      const { files } = e.target
      if (files.length <= 0) {
        return
      } else if (!/.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$message.warning('上传格式不正确，请上传xls或xlsx格式')
        return
      } else {
        this.fileName = files[0].name // 拿到excel文件名
      }
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          // console.log(ev);
          const data = ev.target.result
          const workbook = XLSX.read(data, { type: 'binary' })
          // console.log(workbook);
          const wsname = workbook.SheetNames[0]
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
          // console.log(ws) // 文件中的数据都在这json格式
         
        } catch (error) {}
      }
      fileReader.readAsBinaryString(files[0])
}