js导出excel

假定有这样一个页面

<div class="content-table"><table lay-filter="queryTable"  id="queryTable"><colgroup><col width="150"><col width="200"><col></colgroup></table><div id="tableData" style="display: none"></div>
</div>

table 结合layui的table模块(https://www.layui.com/doc/modules/table.html) 动态加载后端数据

考虑到兼容ie

var idTmr;
function  getExplorer() {var explorer = navigator.userAgent.toLowerCase() ;//ieif (explorer.indexOf("trident")>=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';}
}

接下来就是导出excel的提取出来的方法。

function exportExcel(JSONData, filename,title,filter) {//整个表格拷贝到EXCEL中if(getExplorer()=='ie') {try {var curTb= document.getElementById("tableData");if(!JSONData)return;//转化json为objectvar arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;curTb.innerHTML = createTable(arrData, title, filter);//生产table的html 字符串var curTbl = document.getElementById("table");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可见属性var fname = oXL.Application.GetSaveAsFilename(filename, "Excel Spreadsheets (*.xls), *.xls");} catch (e) {alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对未标记为安全执行脚本的ActiveX控件初始化并执行脚本 → 启用");return false;} 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(JSONData, filename,title,filter)}
}
function Cleanup() {window.clearInterval(idTmr);CollectGarbage();
}

var tableToExcel =function JSONToExcelConvertor(JSONData, FileName,title,filter) {if(!JSONData)return;//转化json为objectvar arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;var excel = createTable(arrData, title, filter);//生产table的html 字符串var excelFile = "<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'>";excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';excelFile += '; charset=UTF-8">';excelFile += "<head>";excelFile += "<!--[if gte mso 9]>";excelFile += "<xml>";excelFile += "<x:ExcelWorkbook>";excelFile += "<x:ExcelWorksheets>";excelFile += "<x:ExcelWorksheet>";excelFile += "<x:Name>";excelFile += "{worksheet}";excelFile += "</x:Name>";excelFile += "<x:WorksheetOptions>";excelFile += "<x:DisplayGridlines/>";excelFile += "</x:WorksheetOptions>";excelFile += "</x:ExcelWorksheet>";excelFile += "</x:ExcelWorksheets>";excelFile += "</x:ExcelWorkbook>";excelFile += "</xml>";excelFile += "<![endif]-->";excelFile += "</head>";excelFile += "<body>";excelFile += excel;excelFile += "</body>";excelFile += "</html>";var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);var link = document.createElement("a");link.href = uri;link.style = "visibility:hidden";link.download = FileName + ".xls";document.body.appendChild(link);link.click();document.body.removeChild(link);
}function createTable(arrData,title,filter) {var excel = '<table border="1" cellspacing="1" cellpadding="1"  id="table">';//设置表头var row = "<tr>";if(title){//使用标题项for (var i in title) {if (title[i].length>=4){row += "<th align='center'  width='100px'>" + title[i] + '</th>';}else{row += "<th align='center'>" + title[i] + '</th>';}}}else{//不使用标题项for (var i in arrData[0]) {row += "<th align='center'>" + i + '</th>';}}excel += row + "</tr>";//设置数据for (var i = 0; i < arrData.length; i++) {var row = "<tr>";for (var index in arrData[i]) {//判断是否有过滤行if(filter){if(filter.indexOf(index)==-1){var value = arrData[i][index] == null ? "" : arrData[i][index];row += '<td    style="mso-number-format:\'\@\';">' + value + '</td>';}}else{var value = arrData[i][index] == null ? "" : arrData[i][index];row += "<td align='center'  style='mso-number-format: \"\@\"; '    >" + value + "</td>";}}excel += row + "</tr>";}excel += "</table>";return  excel;
}

大致思路:

Ie:将产生的包含数据的table字符串（createTable(arrData,title,filter)）放到页面上隐藏div，后将整个表格拷贝到EXCEL中(exportExcel((JSONData, filename,title,filter) ))；

非ie其他浏览器：

首先也是需要生产包含数据的table字符串（createTable(arrData,title,filter)）,

然后采用HTML的方式手动构建excel(JSONToExcelConvertor(JSONData, FileName,title,filter),并导出。

注意：有时会遇到一个问题，就是导出的Excel经常会把我们的数据自动识别为其他格式，例如只有纯数字的字段在导出到 Excel后会被自动识别为数字格式，而一旦数字超过11位，Excel便会将其以科学计数法的形式来显示，比如身份证号码，带区号的电话号码等。

mso-number-format的属性设置书写如下：

`<td style=``'mso-number-format:\"\@\";'` `class``=``'tdRight'``>`

将mso-number-format 以属性style的形式写在生成的table字符串的td标签中.具体的属性可以参考:

https://www.cnblogs.com/zhangym118/p/6565068.html.

mso-number-format 定义数据格式的css样式罗列下：mso-number-format:"0"　NO　Decimals　
mso-number-format:"0\.000"　3　Decimals　
mso-number-format:"\#\,\#\#0\.000"　Comma　with　3　dec　
mso-number-format:"mm\/dd\/yy"　Date7　
mso-number-format:"mmmm\　d\,\　yyyy"　Date9　
mso-number-format:"m\/d\/yy\　h\:mm\　AM\/PM"　D　-T　AMPM　
mso-number-format:"Short　Date"　01/03/1998　
mso-number-format:"Medium　Date"　01-mar-98　
mso-number-format:"d\-mmm\-yyyy"　01-mar-1998　
mso-number-format:"Short　Time"　5:16　
mso-number-format:"Medium　Time"　5:16　am　
mso-number-format:"Long　Time"　5:16:21:00　
mso-number-format:"Percent"　Percent　-　two　decimals　
mso-number-format:"0%"　Percent　-　no　decimals　
mso-number-format:"0\.E+00"　Scientific　Notation　
mso-number-format:"\@"　Text　 （目前只用过）
mso-number-format:"\#\　???\/???"　Fractions　-　up　to　3　digits　(312/943)目前只用过mso-number-format:"\@"　在导出的表格中显示为文本格式。

以上JS导出Excel只适合表格样式比较简单的，不涉及复杂的表头，单元格合并等。

js导出excel(带边框以及文本样式)相关推荐

table2excel 页面导出excel 带边框，文字剧中
导入下面 js 文件 /** jQuery table2excel - v1.1.2* jQuery plugin to export an .xls file in browser from an ...
easypoi导出excel不设置样式_EasyPOI 导出excel设置边框，背景颜色，字体样式
EasyPOI 导出excel设置边框,背景颜色,字体样式 EasyPOI 导出代码示例ExportParams exportParams = new ExportParams(); exportPa ...
通过javascript获取sharepoint数据，使用JS导出Excel
通过网页将数据导出到Excel是常见需求,使用服务器端导出,开发周期长,部署麻烦.这里推荐一种客户端导出方法. 客户端导出与Sharepoint无关.这里附带使用场景基于SP,因为SP自带的导出功能比 ...
js导出excel增加表头、mso-number-format定义数据格式
在做项目时遇到mso-number-format定义的科学计数法转化格式与金额定义的向右对齐样式有冲突. 之前有写过篇博客专门记述mso-number-format定义科学计数法转化格式.当使用这种 ...
Hutool导出excel带前台Base64图片
Hutool导出excel带前台Base64图片,hutool并没有封装具体方法,需要自己手动插入. @Data public class PicDto {private String chartBa ...
POI导出EXCEL带水印以及单元格格式设置
客户提个需求,需要将报表导出 excel带水印和 pdf带水印 2个版本. 做的时候连excel本身怎么带水印都不知道,更不用说用java了.后来在网上搜到了excel添加水印的2个方法. 1.艺术 ...
js导出EXCEL js导出EXCEL
参考一:http://wenku.baidu.com/view/7b81f3eb6294dd88d0d26b57.html 参考二: js导出EXCEL js导出EXCEL <html> ...
浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
POI 导出excel带小数点的数字格式显示不对解决方法
POI 导出excel带小数点的数字格式显示不对解决方法参考文章: (1)POI 导出excel带小数点的数字格式显示不对解决方法 (2)https://www.cnblogs.com/firstd ...

js导出excel(带边框以及文本样式)

js导出excel

js导出excel(带边框以及文本样式)相关推荐

最新文章

热门文章