js前端导出Excel的方法
程序员文章站
2022-07-06 21:05:42
需求：
要求把项目中的table表格导出excel
需求分析及解决：
既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出...
需求：
要求把项目中的table表格导出excel
需求分析及解决：
既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出，也可以是后端导出（技术包括poi或者报表工具等），这篇文章主
要是网上找的前端导出，既然是前端导出又是报表就需要有数据，所以数据都需要你提前做好相应填充
代码：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>html 表格导出</title>
<script language="javascript" type="text/javascript">
var idtmr;
//获取当前浏览器类型
function getexplorer() {
var explorer = window.navigator.useragent ;
//ie
if (explorer.indexof("msie") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexof("firefox") >= 0) {
return 'firefox';
}
//chrome
else if(explorer.indexof("chrome") >= 0){
return 'chrome';
}
//opera
else if(explorer.indexof("opera") >= 0){
return 'opera';
}
//safari
else if(explorer.indexof("safari") >= 0){
return 'safari';
}
}
//获取到类型需要判断当前浏览器需要调用的方法，目前项目中火狐，谷歌，360没有问题
//win10自带的ie无法导出
function exportexcel(tableid) {
if(getexplorer()=='ie')
{
var curtbl = document.getelementbyid(tableid);
var oxl = new activexobject("excel.application");
var owb = oxl.workbooks.add();
var xlsheet = owb.worksheets(1);
var sel = document.body.createtextrange();
sel.movetoelementtext(curtbl);
sel.select();
sel.execcommand("copy");
xlsheet.paste();
oxl.visible = true;
try {
var fname = oxl.application.getsaveasfilename("excel.xls", "excel spreadsheets (*.xls), *.xls");
} catch (e) {
print("nested catch caught " + e);
} finally {
owb.saveas(fname);
owb.close(savechanges = false);
oxl.quit();
oxl = null;
idtmr = window.setinterval("cleanup();", 1);
}
}
else
{
tabletoexcel(tableid)
}
}
function cleanup() {
window.clearinterval(idtmr);
collectgarbage();
}
//判断浏览器后调用的方法，把table的id传入即可
var tabletoexcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="utf-8"></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(unescape(encodeuricomponent(s))) },
format = function(s, c) {
return s.replace(/{(\w+)}/g,
function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodetype) table = document.getelementbyid(table)
var ctx = {worksheet: name || 'worksheet', table: table.innerhtml}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
</head>
<body>
<div >
<button type="button" onclick="exportexcel('tableexcel')">导出excel</button>
</div>
<div id="mydiv">
<table id="tableexcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">html 表格导出道excel</td>
</tr>
<tr>
<td>列标题</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>fff</td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
<td>jjj</td>
</tr>
</table>
</div>
</body>
</html>
重点：
把此代码复制到记事本，命名为.html文件，用浏览器打开即可查看是否可以导出，如果可以导入项目中，把数据填充即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
下一篇： 开放的心态，善于经手各式样的人