vue-cli+element+XLSX实现获取excel表格数据并动态打印表头
安装XLSX
npm install xlsx --save
在需要用到的地方import XLSX from ‘xlsx’
element上传组件
<el-uploadclass="upload"action="":multiple="false":show-file-list="false"accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":http-request="httpRequest"><el-button size="large" type="primary"><i class="el-icon-upload"></i>上传</el-button></el-upload>
处理上传的excel表格
httpRequest (e) {let that = this;let file = e.file // 文件信息if (!file) {// 没有文件return false} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {// 判断是否excel格式that.$message.error('上传格式不正确，请上传xls或者xlsx格式');return false;}const fileReader = new FileReader();fileReader.onload = (ev) => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: 'binary' // 以字符编码的方式解析})const exlname = workbook.SheetNames[0] // 取第一张表const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容// console.log(exl);// 将 JSON 数据挂到 data 里that.tableData = exl;let arr = this.tableData[0];//获取json键名for(let i in arr){that.keyName.push(i);//把json键名加入表头数组}} catch (e) {console.log('出错了');return false;}}fileReader.readAsBinaryString(file);}
element表格组件
<el-tableref="multipleTable"border:data="tableData.slice((currpage - 1) * pagesize , currpage * pagesize)"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"height="400px"><el-table-columntype="selection"width="55"></el-table-column><el-table-column:label="names"v-for="(names,key) in keyName":key="key"width="180"><template slot-scope="scope">{{tableData.slice((currpage - 1) * pagesize , currpage * pagesize)[scope.$index][names]}}</template></el-table-column></el-table>
由于我这里有用到element的分页组件，所以每页显示的数据需要重新计算。使用v-for来确定有多少表头数据需要渲染，用template标签来循环表格内每一行的数据
