vue实现页面导入excel文件

2022-07-15 18:31:55 阅读：157 来源： 互联网

标签：xlsx vue const excel 导入 workbook input 页面

目的：通过点击页面上的一个导入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])
}

标签：xlsx,vue,const,excel,导入,workbook,input,页面
来源： https://www.cnblogs.com/cyf666cool/p/16482280.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue实现页面导入excel文件