⑴ 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里定义的。