⑴ npm的xlsx前端導出excel怎麼合並單元格呢
創建@/vendor/Export2Excel.js：
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');//在vendor文件加下建立Blob.js，代碼在最下方
importXLSXfrom'xlsx'
functiondatenum(v,date1904){
if(date1904)v+=1462;
varepoch=Date.parse(v);
return(epoch-newDate(Date.UTC(1899,11,30)))/(24*60*60*1000);
}
functionsheet_from_array_of_arrays(data,opts){
varws={};
varrange={s:{c:10000000,r:10000000},e:{c:0,r:0}};
for(varR=0;R!=data.length;++R){
for(varC=0;C!=data[R].length;++C){
if(range.s.r>R)range.s.r=R;
if(range.s.c>C)range.s.c=C;
if(range.e.r
if(range.e.c
varcell={v:data[R][C]};
if(cell.v==null)continue;
varcell_ref=XLSX.utils.encode_cell({c:C,r:R});
if(typeofcell.v==='number')cell.t='n';
elseif(typeofcell.v==='boolean')cell.t='b';
elseif(cell.vinstanceofDate){
cell.t='n';
cell.z=XLSX.SSF._table[14];
cell.v=datenum(cell.v);
}
elsecell.t='s';
ws[cell_ref]=cell;
}
}
if(range.s.c<10000000)ws['!ref']=XLSX.utils.encode_range(range);
returnws;
}
functionWorkbook(){
if(!(thisinstanceofWorkbook))returnnewWorkbook();
this.SheetNames=[];
this.Sheets={};
}
functions2ab(s){
varbuf=newArrayBuffer(s.length);
varview=newUint8Array(buf);
for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;
returnbuf;
}
//單列合並數據加工
//在tableData數據中對colName列進行加工(header:['xx','yy',...],mergeRule:[2,1,1,3,2,1...])
//返回格式newTableDatas=[[列頭s],["abc","ss","yyy",0],[null,"xx","y",1],["bca","xxx","yy",1],[null,"xxx","yy",1]]
//返回格式newMergeRules=[{"e":{"r":2,"c":0},"s":{"r":1,"c":0}},{"e":{"r":4,"c":0},"s":{"r":3,"c":0}}]
functionformatTableData(header,tableDatas,mergeRules,colIndex,colName){
varnewTableDatas=[header]//第一行為列頭,
varnewMergeRules=[]//加工合並規則
varcurrRowIndex=1//因為第一行為列頭所以起始為1
varmergeIndexs=[currRowIndex]//因為第一行為列頭所以起始為1,為創建newTableDatas使用
for(vari=0;i
varendRowIndex=currRowIndex+mergeRules[i]-1
varmerge={"e":{"r":endRowIndex,"c":colIndex},"s":{"r":currRowIndex,"c":colIndex}}
newMergeRules.push(merge)
currRowIndex=currRowIndex+mergeRules[i]
mergeIndexs.push(currRowIndex)
}
for(vari=0;i
varcurrRow=tableDatas[i]
if(mergeIndexs.indexOf(i+1)===-1){
currRow[colName]=null//合並的數據但不是第一行時，此列賦值null
}
varnewTabRow=[]
for(varjincurrRow){
newTabRow.push(currRow[j])
}
newTableDatas.push(newTabRow)
}
return[newTableDatas,newMergeRules]
}
@/vendor/Blob.js：
exportfunctionexport_data_to_excel(header,tableDatas,mergeRules,colIndex,colName,excelName){
varoo=formatTableData(header,tableDatas,mergeRules,colIndex,colName);
varranges=oo[1];
/*originaldata*/
vardata=oo[0];
varws_name="SheetJS";
varwb=newWorkbook(),ws=sheet_from_array_of_arrays(data);
/*addrangestoworksheet*/
//ws['!cols']=['apple','banan'];
ws['!merges']=ranges;
/*addworksheettoworkbook*/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:false,type:'binary'});
saveAs(newBlob([s2ab(wbout)],{type:"application/octet-stream"}),excelName+".xlsx")
}
(function(view){
"usestrict";
view.URL=view.URL||view.webkitURL;
if(view.Blob&&view.URL){
try{
newBlob;
return;
}catch(e){}
}
//
//
varBlobBuilder=view.BlobBuilder||view.WebKitBlobBuilder||view.MozBlobBuilder||(function(view){
var
get_class=function(object){
returnObject.prototype.toString.call(object).match(/^[objects(.*)]$/)[1];
}
,FakeBlobBuilder=functionBlobBuilder(){
this.data=[];
}
,FakeBlob=functionBlob(data,type,encoding){
this.data=data;
this.size=data.length;
this.type=type;
this.encoding=encoding;
}
,FBB_proto=FakeBlobBuilder.prototype
,FB_proto=FakeBlob.prototype
,FileReaderSync=view.FileReaderSync
,FileException=function(type){
this.code=this[this.name=type];
}
,file_ex_codes=(
"NOT_FOUND_ERRSECURITY_ERRABORT_ERRNOT_READABLE_ERRENCODING_ERR"
+"NO_MODIFICATION_ALLOWED_ERRINVALID_STATE_ERRSYNTAX_ERR"
).split("")
,file_ex_code=file_ex_codes.length
,real_URL=view.URL||view.webkitURL||view
,real_create_object_URL=real_URL.createObjectURL
,real_revoke_object_URL=real_URL.revokeObjectURL
,URL=real_URL
,btoa=view.btoa
,atob=view.atob
,ArrayBuffer=view.ArrayBuffer
,Uint8Array=view.Uint8Array
;
FakeBlob.fake=FB_proto.fake=true;
while(file_ex_code--){
FileException.prototype[file_ex_codes[file_ex_code]]=file_ex_code+1;
}
if(!real_URL.createObjectURL){
URL=view.URL={};
}
URL.createObjectURL=function(blob){
var
type=blob.type
,data_URI_header
;
if(type===null){
type="application/octet-stream";
}
if(blobinstanceofFakeBlob){
data_URI_header="data:"+type;
if(blob.encoding==="base64"){
returndata_URI_header+";base64,"+blob.data;
}elseif(blob.encoding==="URI"){
returndata_URI_header+","+decodeURIComponent(blob.data);
}if(btoa){
returndata_URI_header+";base64,"+btoa(blob.data);
}else{
returndata_URI_header+","+encodeURIComponent(blob.data);
}
}elseif(real_create_object_URL){
returnreal_create_object_URL.call(real_URL,blob);
}
};
URL.revokeObjectURL=function(object_URL){
if(object_URL.substring(0,5)!=="data:"&&real_revoke_object_URL){
real_revoke_object_URL.call(real_URL,object_URL);
}
};
FBB_proto.append=function(data/*,endings*/){
varbb=this.data;
//decodedatatoabinarystring
if(Uint8Array&&(datainstanceofArrayBuffer||datainstanceofUint8Array)){
var
str=""
,buf=newUint8Array(data)
,i=0
,buf_len=buf.length
;
for(;i
str+=String.fromCharCode(buf[i]);
}
bb.push(str);
}elseif(get_class(data)==="Blob"||get_class(data)==="File"){
if(FileReaderSync){
varfr=newFileReaderSync;
bb.push(fr.readAsBinaryString(data));
}else{
//asyncFileReaderwon'tworkasBlobBuilderissync
thrownewFileException("NOT_READABLE_ERR");
}
}elseif(datainstanceofFakeBlob){
if(data.encoding==="base64"&&atob){
bb.push(atob(data.data));
}elseif(data.encoding==="URI"){
bb.push(decodeURIComponent(data.data));
}elseif(data.encoding==="raw"){
bb.push(data.data);
}
}else{
if(typeofdata!=="string"){
data+="";//
}
//decodeUTF-16tobinarystring
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob=function(type){
if(!arguments.length){
type=null;
}
returnnewFakeBlob(this.data.join(""),type,"raw");
};
FBB_proto.toString=function(){
return"[objectBlobBuilder]";
};
FB_proto.slice=function(start,end,type){
varargs=arguments.length;
if(args<3){
type=null;
}
returnnewFakeBlob(
this.data.slice(start,args>1?end:this.data.length)
,type
,this.encoding
);
};
FB_proto.toString=function(){
return"[objectBlob]";
};
FB_proto.close=function(){
this.size=this.data.length=0;
};
returnFakeBlobBuilder;
}(view));
view.Blob=functionBlob(blobParts,options){
vartype=options?(options.type||""):"";
varbuilder=newBlobBuilder();
if(blobParts){
for(vari=0,len=blobParts.length;i
builder.append(blobParts[i]);
}
}
returnbuilder.getBlob(type);
};
}(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content
作者：paperss
鏈接：https://www.jianshu.com/p/b440106eb8a2
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
⑵ 求前端table導出excel方案，要求瀏覽器兼容、數據量和計算量巨大不能走後台，表格包含跨列跨行
幾萬條記錄，還計算幾個小時...這前台後台估計都不好導。
不知道你說的前台後台是什麼意思，你是想伺服器創建文件流然後返回客戶端直接在瀏覽器查看excel數據嗎？ 要是這樣的話，我覺得直接導出，然後下載再查看比較合適。
⑶ 關於前端如何導出後台傳來的excel介面
題主所說的導出指的是讓前端去下載後台的Excel還時還要有其他操作呢？
如果單純去下載，可以基於XMLHttpRequest請求，請求一個伺服器或者後端的Excel文件，然後設置responseType為blob二進制流來傳輸。例如：
var excelFilePath = 'resources/Excel/importExcel.xlsx';
var xhr = new XMLHttpRequest();
xhr.open('GET', excelFilePath, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob = this.response;
}
之後onload裡面的blob就是這個Excel文件的二進制流，接下來只要將blob轉成文件進行下載就可以了，JS中有很多開源的第三方類庫可以做到，例如filesaver。如果是用filesaver的話，調用其中的saveAs方法就可以將該blob轉成對應文件進行下載
例如
var fileName = "test.xlsx"
saveAs(blob, fileName);
把上述方法加到onload 方法中，前端就會下載一個名為test.xlsx的Excel文件，內容就是後端傳過來的Excel
如果還要有其他操作例如展示或者在線的編輯，就需要一些第三方控制項來完成了，比如SpreadJS
上述的方法也是在他們的官方論壇中學到的，參考網址：
網頁鏈接
⑷ 前端怎麼導出後台生成的excel
導出不是前端能搞定的，比如jsp頁面上點擊按鈕，先要在後台生成數據，然後jsp頁面彈出下載窗口，點選路徑就保存到本地計算機了。
⑸ 前端如何實現文件導入、導出、模板下載、錄入等功能，急需大神詳解，謝謝。
簡單的選課系統，功能：選課&保存選課信息。代碼在附件中。
⑹ 前端輸出是啥意思
就是針對寫的代碼在瀏覽器里看看效果怎麼樣，測試一下
⑺ 有做過html+js，導出word文檔功能的嗎
word前端的導出的話，還真沒做過，excel倒是有很多例子，不過網上兼容性都不是太好，實在不行就用後端導出。
⑻ 前端ajax獲取json數據後怎麼以excel形式導出
這個一般是後台做的，後台生成excel文件返回前端下載。
主要原因是雖然有這種插件（ExcellentExport.js、exceljs、js-xlsx等等），但是受到jquery版本和瀏覽器支持的限制，處理起來也比後端處理復雜。而且一旦數據量大起來瀏覽器是承受不了的。
⑼ Idea編程前端疑問導出全部excel，是怎麼調用後台服務的
這個倒不一定是後台導出，也可以能是前導出不調後台的，你可以在瀏覽器里F12里，當執行上面這個代碼時，看看是否有向後台發送數據，另外可以搜索一下這個toExcel是在哪個js里定義的。