vue + element + 匯入、匯出excel表格
阿新 • • 發佈:2019-02-10
匯入表格:
<input type="file" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
importf(obj) { let _this = this; 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就是你想要的東西 excel匯入的資料 outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); // excel 資料再處理 let arr = [] outdata.map(v => { let obj = {} obj.account = v.登入賬號 obj.name = v.姓名 obj.department = v.部門 obj.secondDepartment = v.二級部門 obj.status = v.狀態 obj.id = v.id arr.push(obj) }) _this.accountList = [...arr]; console.log( _this.accountList) _this.reload(); } reader.readAsArrayBuffer(f); } if(rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }
匯出表格:
1.依賴安裝
cnpm install -S file-saver xlsx
cnpm install -D script-loader
注意: 對於請求的資料有分頁引數的,pageSize 需設定為無限大,打印出的excel 才是全部的資料,
若是pageSize 不夠大,只請求到了一部分資料,當然打印出來也只是部分資料
exportExcel: function(){ require.ensure([], () => { const { export_json_to_excel } = require('../../vendor/Export2Excel'); const tHeader = ['投資顧問', '產品', '持倉', '建倉時間', '建倉理由', "聯絡電話"]; //對應表格輸出的title const filterVal = ['nickname', 'product_name', 'STOCK_NAME', 'CREATE_DATE', 'product_status','reason','mobile']; // 對應表格輸出的資料 console.log(returnCitySN); const param = { pageNumber : this.currentPage, pageSize : this.pagesize, // 99999 reasonStat: this.reasonStat, mobile: this.search.mobile, nickname: this.search.nickname, productName: this.search.productName, accessIp : returnCitySN["cip"], accessCity : encodeURI(encodeURI(returnCitySN["cname"])) }; getAllPortfolioPosition(param).then((data) => { const exceldata = this.formatJson(filterVal, data.positions); export_json_to_excel(tHeader, exceldata, '持倉監控excel'); //對應下載檔案的名字 }) }) },
2.傳遞引數 開啟後臺網址
exportExcel() { let start = this.formInline.timeRange == null ? "" : this.$check.formatDateTime(this.formInline.timeRange[0]); let end = this.formInline.timeRange == null ? "" : this.$check.formatDateTime(this.formInline.timeRange[1]); let url = "/mobilepay-management/creditCard/admin/exportOrderExcel?merchantNo=" + this.formInline.merchantNo + "&gmtCreateStart=" + start + "&gmtCreateEnd=" + end + "&repaymentAmountMin=" + this.formInline.repaymentAmountMin + "&repaymentAmountMax=" + this.formInline.repaymentAmountMax + "&withdrawStatus=" + this.generationStatus + "&withholdingStatus=" + this.payStatus; console.log(url); window.open(url); }
3.匯出模板(空的excel)
outExe: function(){
require.ensure([], () => {
const { export_json_to_excel } = require('@/vendor/Export2Excel'); //引入檔案
const tHeader = ['登入賬號', '姓名', '部門', '二級部門', '狀態']; //將對應的屬性名轉換成中文
const data = [];
export_json_to_excel(tHeader, data, '使用者賬號模板');
})
},