Vue中excel匯入匯出
阿新 • • 發佈:2018-11-22
npm安裝
npm install -S file-saver xlsx(這裡其實安裝了2個依賴) npm install -D script-loader
在src下建立一個資料夾,包含兩個檔案:
Blob.js,Export2Excel.js下載地址:https://gitee.com/BenDanXianSheng/excel_relyon.git
然後再main.js中匯入這兩個檔案;
匯入code:
HTML: <input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
importfxx(obj) { let _this = this; console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1"); let inputDOM = this.$refs.inputer; // 通過DOM取檔案資料 this.file = event.currentTarget.files[0]; 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就是你想要的東西 console.log(outdata) _this.$message({ message: '匯入成功', type: 'success' }); }; reader.readAsArrayBuffer(f); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }
匯出code:
formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, export2Excel() { require.ensure([], () => { const { export_json_to_excel } = require('../../excel/Export2Excel');//這裡必須使用絕對路徑 const tHeader = ['事項','重要程度','狀態','成果物','開始時間','結束時間','延期時間','成果物'];// 匯出的表頭名 const filterVal = ['title', 'level', 'status', 'gain','startdate', 'enddate', 'newenddate','description', ];// 匯出的表頭欄位名 var xlsxTable = this.tableData4Dc xlsxTable.forEach((item,i)=>{ console.log(item) if(item.level==2){ item.level = "重要" }else{ item.level = "一般" } if(item.status==1){ item.status="進行中" }else if(item.status==2){ item.status ="稽核中" }else{ item.status="已完成" } }) const list = xlsxTable; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, this.responsibility);// 匯出的表格名稱,根據需要自己命名 }) },