寄语：vue框架中上传xlsx文件，使用js-xlsx解析文件内容
1.首先执行： npm install xlsx (安装)
2.在当前页面.vue文件中引入： import XLSX from 'xlsx'
3.在main.js中引入：import XLSX from '../static/xlsx.full.min'
注释：当安装了npm install xlsx 在node_modules>xlsx>dist 就可以找到xlsx.full.min文件，引入就OK了
本人是直接复制这个文件到static下，所以文件在main中引入路径为 ../static/xlsx.full.min
4.vue+element
<div class=""> <el-upload action="/" :on-change='onChange' :auto-upload='false' :show-file-list="false" accept=".xls, .xlsx"> <el-button size="small" type="primary" class="upload-bom"><i class="iconfont iconxlsx iconXlSX-sty"></i> <span class="iconXlSX-sty-test">文件</span></el-button> <!-- <div slot="tip" v-if='fileData'>{{ fileData.name }}</div>--> </el-upload> <el-table :data="outputs" style="margin-top: 20px"> <el-table-column label="姓名" prop='name'></el-table-column> <el-table-column label="年龄" prop='age'></el-table-column> </el-table> </div>
5.methods:{ }
data() { return { outputs: [], // 保存读取出来的数据 fileData: '', // 保存选择的文件 } }, // 文件选择回调 onChange(file, fileList) { this.fileData = file; // 保存当前选择文件 this.readExcel() // 调用读取数据的方法 }, // 读取数据 readExcel(e) { let that = this; const files = that.fileData; console.log(files); console.log(files.size) if (!files) { //如果没有文件 return false; } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) { this.$message.error("上传格式不正确，请上传xls或者xlsx格式"); return false; } const fileReader = new FileReader(); fileReader.onload = ev => { try { const data = ev.target.result; // console.log(data) const workbook = XLSX.read(data, { type: "binary" }); console.log(workbook.SheetNames) const wsname = workbook.SheetNames[0]; //取第一张表 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容 console.log(ws); that.outputs = []; //清空接收数据 for (var i = 0; i < ws.length; i++) { var sheetData = { // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名] name: ws[i]['姓名'], age: ws[i]['年龄'], }; that.outputs.push(sheetData); } this.$refs.upload.value = ""; } catch (e) { return false; } }; // 如果为原生 input 则应是 files[0] fileReader.readAsBinaryString(files.raw); }6.运行结果
总结：解析 非常容易、在引入文件切记注意路径，然后就跟着步骤走。就绝对没错。如有疑问欢迎评论交流。
