微客导航 » 文章资讯 » js前端导出Excel的方法

js前端导出Excel的方法

2023-09-21 17:32:07 198

需求：

要求把项目中的table表格导出Excel

需求分析及解决：

既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出，也可以是后端导出（技术包括POI或者报表工具等），这篇文章主
要是网上找的前端导出，既然是前端导出又是报表就需要有数据，所以数据都需要你提前做好相应填充

代码：





html表格导出



varidTmr;
//获取当前浏览器类型
functiongetExplorer(){
varexplorer=window.navigator.userAgent;
//ie
if(explorer.indexOf("MSIE")>=0){
return'ie';
}
//firefox
elseif(explorer.indexOf("Firefox")>=0){
return'Firefox';
}
//Chrome
elseif(explorer.indexOf("Chrome")>=0){
return'Chrome';
}
//Opera
elseif(explorer.indexOf("Opera")>=0){
return'Opera';
}
//Safari
elseif(explorer.indexOf("Safari")>=0){
return'Safari';
}
}

//获取到类型需要判断当前浏览器需要调用的方法，目前项目中火狐，谷歌，360没有问题
//win10自带的IE无法导出
functionexportExcel(tableid){
if(getExplorer()=='ie')
{
varcurTbl=document.getElementById(tableid);
varoXL=newActiveXObject("Excel.Application");
varoWB=oXL.Workbooks.Add();
varxlsheet=oWB.Worksheets(1);
varsel=document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible=true;

try{
varfname=oXL.Application.GetSaveAsFilename("Excel.xls","ExcelSpreadsheets(*.xls),*.xls");
}catch(e){
print("Nestedcatchcaught"+e);
}finally{
oWB.SaveAs(fname);
oWB.Close(savechanges=false);
oXL.Quit();
oXL=null;
idTmr=window.setInterval("Cleanup();",1);
}

}
else
{
tableToExcel(tableid)
}
}
functionCleanup(){
window.clearInterval(idTmr);
CollectGarbage();
}

//判断浏览器后调用的方法，把table的id传入即可
vartableToExcel=(function(){
varuri='data:application/vnd.ms-excel;base64,',
template='{table}',
base64=function(s){returnwindow.btoa(unescape(encodeURIComponent(s)))},
format=function(s,c){
returns.replace(/{(\w+)}/g,
function(m,p){returnc[p];})}
returnfunction(table,name){
if(!table.nodeType)table=document.getElementById(table)
varctx={worksheet:name||'Worksheet',table:table.innerHTML}
window.location.href=uri+base64(format(template,ctx))
}
})()







导出Excel




html表格导出道Excel



列标题


aaa
bbb
ccc
ddd
eee


AAA
BBB
CCC
DDD
EEE


FFF
GGG
HHH
III
JJJ

重点：

把此代码复制到记事本，命名为.html文件，用浏览器打开即可查看是否可以导出，如果可以导入项目中，把数据填充即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js前端导出Excel的方法

热门推荐

随机推荐