新网站做优化要准备什么,广州网站设计建站,生成链接的软件,外墙设计装修效果图软件在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据.
一、引入依赖 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx二、在main.js中引入
import XLSX from xlsx三、创建vue文件
divel-uplo…在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据.
一、引入依赖 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx二、在main.js中引入
import XLSX from xlsx三、创建vue文件
divel-uploadclassupload-demoaction:on-changehandleChange:on-removehandleRemove:on-exceedhandleExceed:limitlimitUploadacceptapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel:auto-uploadfalse!-- 只 能 上 传 xlsx / xls 文 件 --el-button sizesmall typeprimary点击上传/el-button/el-upload!-- 数据展示 --el-mainel-table :datadael-table-column propcode label编号/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column proppro label省份/el-table-columnel-table-column propcit label城市/el-table-columnel-table-column propdis label区县/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; //是否将文件读取为二进制字符串var f this.file;var reader new FileReader();FileReader.prototype.readAsBinaryString function(f) {var binary ;var rABS false; //是否将文件读取为二进制字符串var wb; //读取完成的数据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)), {//手动转化type: base64});} else {wb XLSX.read(binary, {type: binary});}outdata XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西console.log(未处理的原始数据如下);console.log(outdata);//此处可对数据进行处理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.daarr;_this.dalenarr.length;return arr;};reader.readAsArrayBuffer(f);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}结果展示
