Javascript

vue实现页面导入excel文件

本文主要是介绍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])
}

 

这篇关于vue实现页面导入excel文件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!