前端table 导出excel

最新推荐文章于 2024-05-28 10:29:44 发布

iceblue_coffee

最新推荐文章于 2024-05-28 10:29:44 发布

阅读量289

点赞数 1

文章标签： ie 导出word 导出excel

本文链接：https://blog.csdn.net/iceblue_coffee/article/details/80751707

版权

//table 导出 excel
//替换table数据和worksheet名字
format : function(s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
},
//base64转码
base64: function (s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
exportExcel: function () {

tableToExcel('tableid', '统计报表');

function tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns="http://www.w3.org/TR/REC-html40"><head>' +
' <style type="text/css">' +
'table td,table th {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
'text-align: center;' +
'font-size: 16px;'+
'font-family: "Microsoft Yahei";'+
' }' +
'#title {'+
'padding: 6px;'+
'text-align: center;'+
'font-size: 22px;'+
'font-family: "Microsoft Yahei";'+
'border-left: 2px solid #aee1ff;'+
'border-top: 2px solid #aee1ff;'+
'border-right: 2px solid #aee1ff;'+
'border-bottom: 1px solid #aee1ff;'+
'}'+
'</style>' +
'</head><body ><table class="excelTable"><tr><td id="title" colspan="12">{worksheet}</td></tr>{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
window.location.href = uri + searchObj.base64(searchObj.format(template, ctx));
}

}
};

window.btoa() 在ie8下不支持，这种方式导出只应用于数据量小的情况下， ---------备忘笔记

我现在做的项目是需要导出一个复杂的表格成word，还要支持ie8 ，以前的方式是用freeMarker 去做的，考虑到维护太困难（主要是觉得前端样式改变，freemarker 模板要重做，而且数据还特别多），而且上述方式不支持，，，这种情况下想到了一个办法，把模板（word的模板，如果要导成excel要用excel模板）放在后台去维护，前端传渲染后的table代码到后台，通过后台拼接写到文件流下载。 --- 2018/7/3

iceblue_coffee

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端table 导出excel

//table 导出 excel //替换table数据和worksheet名字 format : function(s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); }, /...
复制链接

扫一扫