在工作中遇到需要前端上傳excel文件獲取到相應(yīng)數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù).

一、引入依賴

 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx

二、在main.js中引入

import XLSX from 'xlsx'

三、創(chuàng)建vue文件

<div><el-uploadclass="upload-demo"action="":on-change="handleChange":on-remove="handleRemove":on-exceed="handleExceed":limit="limitUpload"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel":auto-upload="false"><!-- 只 能 上 傳 xlsx / xls 文 件 --><el-button size="small" type="primary">點(diǎn)擊上傳</el-button></el-upload><!-- 數(shù)據(jù)展示 --><el-main><el-table :data="da"><el-table-column prop="code" label="編號"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="pro" label="省份"></el-table-column><el-table-column prop="cit" label="城市"></el-table-column><el-table-column prop="dis" label="區(qū)縣"></el-table-column></el-table></el-main></div>

四、核心方法

handleChange(file, fileList){this.fileTemp = file.raw;if(this.fileTemp){if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){this.handleExcel(this.fileTemp);} else {this.$message({type:'warning',message:'文件格式錯誤，請刪除后重新上傳！'})}} else {this.$message({type:'warning',message:'請上文件！'})}},handleExcel(fileTemp) {let _this = this;this.file = fileTemp;var rABS = false; //是否將文件讀取為二進(jìn)制字符串var f = this.file;var reader = new FileReader();FileReader.prototype.readAsBinaryString = function(f) {var binary = "";var rABS = false; //是否將文件讀取為二進(jìn)制字符串var wb; //讀取完成的數(shù)據(jù)var outdata;var reader = new FileReader();reader.onload = function(e) {var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for (var i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}var XLSX = require("xlsx");if (rABS) {wb = XLSX.read(btoa(fixdata(binary)), {//手動轉(zhuǎn)化type: "base64"});} else {wb = XLSX.read(binary, {type: "binary"});}outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西console.log('未處理的原始數(shù)據(jù)如下：');console.log(outdata);//此處可對數(shù)據(jù)進(jìn)行處理let arr = [];outdata.map(v => {let obj = {}obj.code = v['code']obj.name = v['name']obj.pro = v['province']obj.cit = v['city']obj.dis = v['district']arr.push(obj)});_this.da=arr;_this.dalen=arr.length;return arr;};reader.readAsArrayBuffer(f);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}

結(jié)果展示