前端导出excel
2018-11-16 本文已影响3人
Adoins
公司做项目需要前端导出 excel，因此查了许多，总结出前端导出 excel 的三种方法（如不全面，请更正）
- 通过传入 tableId 导出excel，此时 table 已生成
- 通过传入 json 数据导出excel
- 通过后端导出excel
一、通过传入tableId导出excel
寻找到了一个用法简单而且输出的excel表格也好看的excel插件，这是用法链接 http://www.jq22.com/jquery-info19771导出的excel如下
image.png
在ie9下会报blob不存在，可以通过下载jquery.base64.js https://github.com/yckart/jquery.base64.js解决，然后在报错的地方中插入代码即可
if (!window.btoa) window.btoa = $.base64.btoa
if (!window.atob) window.atob = $.base64.atob
但是在ie9下还是有其他兼容问题，比如promise等（排除一个兼容又有一个，在ie9还是导不出来），最后采用ie9独有的ActiveXObject来导出，而其他浏览器则还是采用ExcelGen插件导出
// 导出excel
function exportExcel(tableId, fileName) {
// ie导出excel需用activex
if (window.ActiveXObject) {
var curTbl = document.getElementById(tableId);
var oXL = new ActiveXObject("Excel.Application");
//创建AX对象excel
var oWB = oXL.Workbooks.Add();
//获取workbook对象
var xlsheet = oWB.Worksheets(1);
//激活当前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性
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);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
excel = new ExcelGen({
"src_id": tableId,
"show_header": true,
"file_name": fileName
})
excel.generate();
}
}
最后虽然已经兼容ie9了但是缺点是得用户允许开启activex控件而且输出的样式也不够美观。
另外这个方法有个弊端，就是所要导出的table必须已经在dom中渲染出来，因此也只能导出一页的表格数据。自己想了个不太优雅但能完美解决但的方法是点击导出按钮时在html中插入一个隐藏的不做分页的表格，然后根据这个tableid来导出（点击导出再渲染表格能提高一点性能），数据量过大时就性能会差
二、通过传入json数据导出excel
通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</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数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
这个方法同样在ie9上兼容性差，亲测导出的excel会带上meta、head等标签信息
三、后端导出excel
其实下载以及导出文件基本上都是后端操作，这样不用考虑兼容性，也只有后端才能读取下载文件。可以用nodejs来导出excel，本人正在学习中，后期更新
