1、背景
首先呢，这次是我最近在写个需求，前面我有提到过导出excel用java代码导出，但是这样写代码比较繁琐，而且如果带有很复杂的格式要求，看着就脑仁疼。所以我就想到了在前端直接导出来。下面开始
2、步骤
首先我呢做了很多百度细节，有非常多的，我大概总结了一些在前端导出我遇到的问题。首先你会遇到兼容性的问题。然后就是安全性问题，还有文档打开的时候会有明显提升文件缺失或者损坏。还有就是如果你样式写非常复杂也会导出有一定差异。最后就是如果这些你都不在乎，下面我的代码你可能会用到，我百度了很多代码这是相对比较好的。
第一份，这份比较不错我就是在项目中用的这份代码：
//判断是否IE浏览器
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
} else {
return false;
}
}
function method() {
var lHtml = document.getElementById("myDiv").innerHTML;
var tableHtml='<html><head><meta charset="UTF-8"></head><body>';
tableHtml += lHtml;
tableHtml += '</body></html>';
var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
var fileName = "EXCEL.xls";
if(isIE()){
window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
}else{
var oa = document.createElement('a');
oa.href = URL.createObjectURL(excelBlob);
oa.download = fileName;
document.body.appendChild(oa);
oa.click();
}
使用的时候 var lHtml = document.getElementById("myDiv").innerHTML;
修改一下这里的ID，直接调用table表格包起来的DIV。注意一点，这里table标签需要一个div包起来。
下面是第二份。
//第五种方法
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';
}
}
function method5(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();
}
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))
}
})()
使用的时候调用method5(tableid) 就行了
tableid 就是table表格的ID
下面我需要告诉大家的是这里table表格如果没有加 border标签是 不会显示线条的
所以我一般会选择加上线条粗细为1 缝隙为0的标签
<table border="1" cellspacing="0">
3、总结
其实很近没更新文章了，主要是技术点get不深不能胡编乱造，然后就是最近确实工作比较 多。这次也是遇到了个需求，正好我以前又使用过前端直接导出，就想到了这个简便的方案，但是缺点的很明显，前面也说了。文件会缺损。应为excel软件可以识别页面标签，但是比较他不是浏览器，识别起来有限。打开肯定会遇到兼容性问题。xlsx后缀你导出来就肯定打不开。然后就是浏览器兼容性问题。所以使用java代码poi导出确实是比较安全和比较合理的方式，但是工作量会很大。看选择呗。