Vue+Element前端導入導出Excel 科技頭條網

點擊上方 "程序員小樂"關注, 星標或置頂一起成長

每天凌晨00點00分, 第一時間與你相約

每日英文

What other people think of you is none of your business. Trust the feeling more than the words.

別人怎麼看你，和你毫無關係。更多的相信自己的感覺，而非別人的言語。

每日掏心話

別為了那些不屬於你的觀眾，去演繹不擅長的人生。別人怎麼看你，和你毫無關係。你要怎麼活，也和別人毫無關係。

來自：xrkffgg | 責編：樂樂

鏈接：segmentfault.com/a/1190000018993619

程序員小樂(ID:study_tech)第 810 次推文圖片來自百度

往日回顧：就為了10萬塊？前百度程序員，非法控制公司上百臺服務器“挖礦”被判3年

正文

1、前言

1.1 業務場景

由前臺導入Excel表格，獲取批量數據。根據一個數組導出Excel表格。

2、實現原理

2.1 引入工具庫

file-saver、xlsx、script-loader

2.2 導入Excel

2.2.1 Element 上傳控件

handleRemove(file,fileList){ this.fileTemp = null},fileTemp這裡定義了一下變量，指向最新上傳的附件，起始定義為null。

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兩個屬性。

2.3 導出Excel

2.3.1 引入JS文件

可參考下載地址- github：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, '導出列表名稱') })},