前端可视化展示Excel
Excel鍙鍖栧悗绔繑鍥濫xcel娴佸墠绔睍绀哄墠瑷€闇€姹傦細鏈夋椂鎴戜滑闇€瑕佹帴鏀跺悗绔繑鍥炵殑Excel娴併€傚綋鍓嶇杩涜鍙鍖栧睍绀烘椂锛屾鏃舵寜鐓т互涓嬫楠ゆ彁鍓嶈鏄庯細鍓嶇灞曠ず鐨凟xcel鏍峰紡鍜屾牸寮忓畬鍏ㄧ敱鍚庣鎺у埗锛屾瘮濡傚悎骞跺崟鍏冩牸锛屾牱寮忔帶鍒躲€傚墠绔疍emo馃尠:渚嬪瓙锛堟湁鐜版垚鐨勭晫闈級瀹夎渚濊禆搴撳畨瑁呬緷璧栧簱锛堜簩閫変竴锛塶pminstallxlsxxlsx-stylelessless-loader@5.0.0yarnaddxlsxxlsx-stylelessless-loader@5.0.0澶嶅埗鏂囦欢澶箂rc/components/x-spreadsheetsrc/util/xlsx-exchange鎴虫垜涓嬭浇馃憜寮曞叆渚濊禆锛氬湪浣犺璇锋眰鏄剧ず鐨?vue鏂囦欢涓璉mportaxiosfrom'axios'importSpreadsheetfrom'@/components/x-鐢靛瓙琛ㄦ牸';浠?xlsx-style'瀵煎叆XStyle锛涗粠鈥淍/util/xlsx-exchange鈥濆鍏xchange锛涘惎鍔ㄩ」鐩細淇敼鎶ラ敊cpexcel.js锛坈trl+p鍙洿鎺ユ悳绱㈡枃浠讹級锛堝垹闄わ級--varcpt=require('./cpt'+'able');(娣诲姞)++varcpt=cptable;鏄剧ず瀹氫箟妯℃澘
瀹氫箟datadata(){return{sheet:null,flobFileSize:0,}},鍒濆鍖杧sheetasyncmounted(){this.instantiateSheet();},xsheet閰嶇疆鏂规硶锛歿//璁剧疆xsheet鏁版嵁setXsheetData(out){this.sheet.loadData(out);濡傛灉锛坥ut.length锛墈璁ヽolLen=Object.keys锛坥ut[0]銆傝[0].cells).length||10;//璁ヽolLen=this.getTableColLen(out)||10;璁﹔owLen=Object.keys(out[0].rows).length||10;this.sheet.sheet.data.rows.len=rowLen;this.sheet.sheet.data.cols.len=colLen;杩欎釜.sheet.reRender();}},//瀹炰緥鍖杧sheetinstantiateSheet(){letqueryListHeight=0;濡傛灉(this.$refs.queryList)queryListHeight=this.$refs.queryList.$el.offsetHeight||0;this.sheet=newSpreadsheet(document.getElementById("xss-demo"),{mode:"read",//缂栬緫|璇诲彇showToolbar:false,showGrid:false,showContextmenu:false,view:{height:()=>document.documentElement.clientHeight-180-queryListHeight,width:()=>document.documentElement.clientWidth-300,},琛?{height:25,len:100,},col:{len:16,width:100锛岀储寮曞搴︼細60锛屾渶灏忓搴︼細60锛寎,});},}鍙戦€佽姹俛xios({url:'http://39.102.36.212:3006/excelExport',method:'post',responseType:'blob'}).then((res)=>{constself=thisconstresult=res.datathis.flobFileSize=result.size||0;if(resultinstanceofBlob){varreader=newFileReader();reader.onload=function(e){璁╂暟鎹?e.target.result;console.log(data)if(data){letworkbook=XStyle.read(data,{type:"binary",cellStyles:true});letout=Exchange.stox(workbook);self.setXsheetData(out)}else{self.setXsheetData([])}};reader.readAsBinaryString(result);}else{self.setXsheetData([])}})灞曠ず鏁堟灉
