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