??vue-element-xlsx在線讀取Excel數(shù)據(jù)預(yù)覽

?1.安裝XLSX

npm install xlsx -s

2.復(fù)制過去就可以用?

<template><div><!-- excel表格上傳 --><el-uploadclass="upload-demo"dragaction="https://jsonplaceholder.typicode.com/posts/"multipleaccept=".xlsx":on-exceed="exceed":limit="1":on-remove="remove":http-request="uploadFile"><i class="el-icon-upload"></i><div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div><div class="el-upload__tip" slot="tip">1次只能上傳1個xls文件，且不超過500kb</div></el-upload><!-- 上傳的excel表格預(yù)覽 --><div class="preview-excel"><el-table class="listTable_ele" v-show="listTable.length != 0" :data="listTable" stripe height="250" style="width:100%"><el-table-column prop="name" label="姓名" width="200" align="center"></el-table-column><el-table-column prop="age" label="年齡" width="200" align="center"></el-table-column><el-table-column prop="city" label="城市" width="200" align="center"></el-table-column><el-table-column prop="sno" label="學(xué)號" width="200" align="center"></el-table-column></el-table></div></div> </template><script>import XLSX from "xlsx"; //引入xlsxexport default {data() {return {listTable: []};},methods: {//解析excelasync uploadFile(params) {const _file = params.file;const fileReader = new FileReader();fileReader.onload = (ev) => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: 'binary'});for (let sheet in workbook.Sheets) {//循環(huán)讀取每個文件const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);//若當(dāng)前sheet沒有數(shù)據(jù)，則continueif(sheetArray.length == 0){continue;}console.log("讀取文件");console.log(sheetArray);for(let item in sheetArray){let rowTable = {};//這里的rowTable的屬性名注意要與上面表格的prop一致//sheetArray的屬性名與上傳的表格的列名一致rowTable.name = sheetArray[item].姓名;rowTable.age = sheetArray[item].年齡;rowTable.city = sheetArray[item].城市;rowTable.sno = sheetArray[item].學(xué)號;this.listTable.push(rowTable);}console.log(this.listTable)}} catch (e) {this.$message.warning('文件類型不正確！');}};fileReader.readAsBinaryString(_file);},//上傳1個以上文件時彈窗提示錯誤exceed: function() {this.$message.error("最多只能上傳1個xls文件");},//刪除文件remove() {this.listTable = [];}}}; </script>

3.Excel文件格式

4.實(shí)現(xiàn)效果

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的vue-element-xlsx在线读取Excel数据预览的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。