前端js导出excel
Posted 晓未苏
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端js导出excel相关的知识，希望对你有一定的参考价值。
前两种可以直接把代码复制到文本文档中，然后改后缀为html，就可以直接测试
第一种
<!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>
这个导出比较方便，可以兼容多个浏览器，但是导出的excel表格没有单元格
原作者：https://www.yisu.com/zixun/184704.html
第二种
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出excel文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script>
function tableToExcel()
//要导出的json数据
var jsonData = [
name:'路人甲',
phone:'123456789',
email:'000@123456.com'
,
name:'炮灰乙',
phone:'123456789',
email:'000@123456.com'
,
name:'土匪丙',
phone:'123456789',
email:'000@123456.com'
,
name:'流氓丁',
phone:'123456789',
email:'000@123456.com'
,
]
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\\n`;
//增加\\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ )
for(let item in jsonData[i])
str+=`$jsonData[i][item] + '\\t',`;
str+='\\n';
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
</script>
</body>
</html>
第二种在ie9上兼容性差，导出的excel会带上meta、head等标签信息，在谷歌上使用是没有问题的
原作者：https://www.jianshu.com/p/30b9d4088018
这两个导出方法都试过，两个导出的excel用编译器打开就是前端代码。
第三种
table.exportFile(['名字','性别','年龄'], [
['张三','男','20'],
['李四','女','18'],
['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls
https://www.layui.com/doc/modules/table.html#export
以上是关于前端js导出excel的主要内容，如果未能解决你的问题，请参考以下文章