使用JS导出表格数据至Excel的体验 -- 含源码分析
首先，感谢原作者的整理与创作 –
JS导出Excel代码部分贡献：
JS导出excel 兼容ie、chrome、firefox – 分析对象
HTML用JS导出Excel的五种方法
自述：
之前做的一个项目客户要求Excel导出数据的功能；
一般来说，我会选择poi.jar来完成Excel导出功能；
但是…我为了省事，而选择了JS来完成这项工作；
当时没多想，随便在网上找了些代码，Chrome浏览器上一跑就完事；
果不其然，JS导出Excel坑有很多，着实不推荐这么搞；
以下为源码分析：
/*** 源码主要分为3个部分：* 1.获取浏览器类型* 2.IE浏览器表格导出* 3.其他主流浏览器导出*//* 1.获取浏览器类型 */
function getExplorer() {var explorer = window.navigator.userAgent;//ieif (explorer.indexOf("MSIE") >= 0) {return 'ie';}//firefoxelse if (explorer.indexOf("Firefox") >= 0) {return 'Firefox';}//Chromeelse if(explorer.indexOf("Chrome") >= 0){return 'Chrome';}//Operaelse if(explorer.indexOf("Opera") >= 0){return 'Opera';}//Safarielse if(explorer.indexOf("Safari") >= 0){return 'Safari';}
}这段代码并不难懂
window.navigator.userAgent：得到当前 访问者代理头信息，格式一般如下：
Chrome 浏览器结果：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36；
那么，拿到了 访问者代理头信息，我们便可以粗略的判断一下其浏览器类型；
但是：这段代码并不能准确的获取浏览器类型；
我在 win10 操作系统上的 IE 11 浏览器运行以上代码，其不能发现我是 IE 浏览器…（原因在于，微软在 IE 11 上去掉了 MSIE 标识 ）
只用 .index.Of(str) 这样的函数去判断，是不准确的；至于为什么，仔细看看 访问者代理头 信息即可知道，Chrome 浏览器的 访问者代理头信息 居然有 AppleWebKit，Safari 等标识…这则是另外一个故事了：
浏览器野史 UserAgent列传（上），浏览器野史 UserAgent列传（下）
关于 JS 判断 浏览器类型 的代码推荐：
JS获取当前浏览器及版本信息
"button" value="导出EXCEL" onclick="method1('table')" />/* 2.IE浏览器表格导出 */
function method1(tableid) {// 如果是IE浏览器if(getExplorer()=='ie') {var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject("Excel.Application");//创建AX对象excelvar oWB = oXL.Workbooks.Add();//获取workbook对象var xlsheet = oWB.Worksheets(1);//激活当前sheetvar 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 {tableToExcel('ta')}
}之前已经说了，由于第一部分代码无法准确的判断 浏览器类型，以至于这段代码对于 IE 11 是失效的…
关于 IE 浏览器的 JS 导出 Excel 本人未做过多的了解，此段代码只能分析至此…
如果你有兴趣了解，建议从 ActiveXObject 对象开始了解；
ActiveXObject 此对象为 Microsoft 扩展，仅在 Internet Explorer 中受支持；
/* 3.其他主流浏览器导出 */
var tableToExcel = (function() {var uri = 'data:application/vnd.ms-excel;base64,',template = '{table}
',base64 = function(s) {return window.btoa(unescape(encodeURIComponent(s)))},// 下面这段函数作用是：将template中的变量替换为页面内容ctx获取到的值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};// format()函数：通过格式操作使任意类型的数据转换成一个字符串// base64()：进行编码window.location.href = uri + base64(format(template, ctx));}
})();最后一段代码，我也没太仔细研究（其实是看不懂 Σ( ° △ °|||)︴）；
那么就这样吧，最后总结一下：
JS(前端) 导出 Excel 的优缺点：
优点： 方便；
缺点： 兼容性问题，分页数据如何全部导出问题，Excel 样式问题；
各位看官请酌情选择，我还是滚回去老老实实弄 poi 进行Excel导出吧；
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！