您的位置：首页 > Web前端 > HTML

HTML table导出到Excel中的解决办法

2017-10-26 18:22 483 查看
第一部分：html+js

1.需要使用的表格数据（先不考虑动态生成的table）

<script type="text/javascript">
var timer;
function getExplorer(){//获取浏览器
var explorer=window.navigator.userAgent;
if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){
return 'ie';
}else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function excels(table){
if(getExplorer()=='ie'){
var curTbl = document.getElementById(table);
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 filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
}catch(e){
window.print("Nested catch caught " + e);
}finally{
oWB.SaveAs(filename);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;//结束excel进程，退出完成
timer = window.setInterval("Cleanup();", 1);
}
}else{
tableToExcel("tables");
}
}
function Cleanup(){
window.clearInterval(timer);
CollectGarbage();//CollectGarbage,是IE的一个特有属性,用于释放内存的
}
var tableToExcel=(function(){
var uri = 'data:application/vnd.ms-excel;base64,',
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><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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>


View Code

第二部分：分析测试
测试环境（谷歌，火狐，IE，EDGE，QQ浏览器）

①.真正起到作用的是a标签的属性，input按钮只是起到了一个过渡到download属性的作用；

其中有编码解码，需要注意中文乱码情况；

测试只有谷歌和火狐起作用，且只有谷歌下载的文件名是“下载.xls”，火狐的文件名像是编码后的~

　双核浏览器当然也只有chrome内核下有效果~~

　我比较喜欢的一点，html中合并的单元格导出到excel中继续保留合并效果~~

谷歌截图：



火狐截图:



②.主要是利用AX对象创建excel

　　在IE下不行，会提示错误“不能使用啥对象什么什么”

　　难道是需要安装Office软件？没试过。。

这几个浏览器中，谷歌的体验稍微好一点，还可以自己带个命名什么的~~，其他体验都不是很友好~~

还有其他的问题是我继续需要想的，表格内容分页情况导出？筛选条件后导出全部？等等等~

附上源码注释地址：https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html

开发过程中有很多预料不到的事，继续加油吧！

~~~~~~~~~~~~剩到最后的解决办法是利用插件~~~~~~~~~~~~

比如github上的

1020 Star：https://github.com/kayalshri/tableExport.jquery.plugin

270 Star：https://github.com/clarketm/TableExport

159 Star：https://github.com/huanz/tableExport

说明一下，星星多的插件是有base64编码，所以还额外需要js脚本！

个人比较喜欢最少星星的库，感觉明了清晰，可以按需加载~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航