测试兼容IE google 火狐浏览器。看到的朋友也许你某一天也会需要。
//obj是table表格外面嵌套div id function saveCode(obj) { try { var strHTML = obj.innerHTML; if (navigator.userAgent.indexOf("MSIE") > 0) //IE浏览器 { var winname; winname = window.open("ToExcel", "_blank", 'top=10000'); winname.document.open('text/html', 'replace'); winname.document.write("<style>"); winname.document.write("table{border:solid 1px #000;text-align:center;border-collapse:collapse; border-spacing:0;}"); winname.document.write("table td{border:solid 1px #000;text-align:center;}"); winname.document.write("table th{border:solid 1px #000;text-align:center;}"); winname.document.write("</style>"); winname.document.write(strHTML); winname.document.execCommand('SaveAs', '', 'excel.xls'); document.execCommand("ClearAuthenticationCache"); winname.close(); } else { //Chrome 火狐 浏览器 var str = getTblData("datalist", this); //"博客, 域名Blog 2Sjolzy.cn, 3.1;2 123123,123123 123,123"; 测试数据 var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str);//要编码 //创建a标签模拟点击下载 var downloadLink = document.createElement("a"); downloadLink.href = uri; downloadLink.download = "excel.csv"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } } catch (e) { alert(e.Message); return false; } return false; } function getTblData(inTbl, inWindow) { var rows = 0; var tblDocument = document; tblDocument = eval(inWindow).document; var curTbl = tblDocument.getElementById(inTbl); var outStr = ""; if (curTbl != null) { for (var j = 0; j < curTbl.rows.length; j++) { for (var i = 0; i < curTbl.rows[j].cells.length; i++) { if (i == 0 && rows > 0) { outStr += ",";// "; rows -= 1; } outStr += curTbl.rows[j].cells[i].innerText + ",";// "; if (curTbl.rows[j].cells[i].colSpan > 1) { for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) { outStr += ",";// "; } } if (i == 0) { if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) { rows = curTbl.rows[j].cells[i].rowSpan - 1; } } } outStr += " "; } } else { outStr = null; alert(inTbl + "不存在 !"); } return outStr; }
对应obj 和datalist 的html结构如图:
注意的是 getTblData里面构建数据源的时候","号是换行符 如果文字里面有,号 需要替换。
解决汉字乱码问题
var uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);
数据需要 BOM 头
BOM 头就是一个文档标记,标识 Unicode 文件