Vue+Element前端導入導出Excel(實踐)
- 2020 年 3 月 6 日
- 筆記
（給程式設計師成長指北加星標，提升前端技能.）
作者：xrkffgg https://segmentfault.com/a/1190000018993619
1、 前言
1.1 業務場景
由前台導入Excel表格，獲取批量數據。
根據一個數組導出Excel表格。
2、 實現原理
2.1 引入工具庫
file-saver、xlsx、script-loader
npm install -S file-saver xlsx npm install -D script-loader
2.2 導入Excel
2.2.1 Element 上傳控制項
<el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove" :file-list="fileListUpload" :limit="limitUpload" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :auto-upload="false"> <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只 能 上 傳 xlsx / xls 文 件</div> </el-upload>
limitUpload = 1限制只能上傳1個文件
accept為默認打開的可上傳的文件格式
handleChange(file, fileList){ this.fileTemp = file.raw }, handleRemove(file,fileList){ this.fileTemp = null },
fileTemp這裡定義了一下變數，指向最新上傳的附件，起始定義為null。
這裡發現控制項file.raw是我們要用的File類型。
2.2.2 導入判斷
if(this.fileTemp){ if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){ this.importfxx(this.fileTemp) } else { this.$message({ type:'warning', message:'附件格式錯誤，請刪除後重新上傳！' }) } } else { this.$message({ type:'warning', message:'請上傳附件！' }) }
2.2.3 導入函數
importfxx(obj) { let _this = this; // 通過DOM取文件數據 this.file = obj var rABS = false; //是否將文件讀取為二進位字元串 var f = this.file; var reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString = function(f) { var binary = ""; var rABS = false; //是否將文件讀取為二進位字元串 var pt = this; 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就是你想要的東西 this.da = [...outdata] let arr = [] this.da.map(v => { let obj = {} obj.code = v['設備ID'] obj.type = v['設備型號'] arr.push(obj) }) return arr } reader.readAsArrayBuffer(f); } if(rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } },
arr就是我們要的結果，是一個數組。每一個值是個對象，包含了code type兩個屬性。
excel中格式為橫向 設備ID 和 設備型號。
2.3 導出Excel
2.3.1 引入JS文件
可參考下載地址- github：https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel
將其中的2個JS文件放入到自己的工程中。
2.3.2 修改JS文件中地址
打開Export2Excel.js，會出現如上圖所示。由於本人將Blob.js和Export2Excel.js放到了同一級，這裡引入是這樣的。
這幾個文件不支援import引入，所以需要script-loader來將他們掛載到全局環境下。
2.3.3 導出函數
getExcel(res) { require.ensure([], () => { const { export_json_to_excel } = require('../../introduce/Export2Excel.js') const tHeader = ['姓名', '年齡'] const filterVal = ['name', 'age'] const list = res const data = this.formatJson(filterVal, list) export_json_to_excel(tHeader, data, '導出列表名稱') }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) },
這裡的引用請根據自己的層級關係和文件夾命名require('../../introduce/Export2Excel.js')
res為傳入的數組，格式如：res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]
tHeader為導出Excel表頭名稱，導出列表名稱即為導出Excel名稱。
下載的Excel位置根據瀏覽器設置的下載位置而定。
3、 後記
感謝支援。若不足之處，歡迎大家指出，共勉。
如果覺得不錯，記得 點贊 ，謝謝大家 ?
❤️ 看完三件事 大家好，我是 koala，如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙： 點個【在看】，或者分享轉發，讓更多的人也能看到這篇內容關注公眾號【程式設計師成長指北】，不定期分享原創&精品技術文章。添加微信【 coder_qi 】。加入程式設計師成長指北公眾號交流群。分享前端好文，點亮 在看
