学习笔记之js中导出表格到excel详解+源码
来源：互联网 发布：查看php源码 编辑：程序博客网 时间：2024/06/06 03:58
在系统开发中，经常会遇到要将一个表格数据导出到excel中，刚刚做完，把示例代码共享一下，话不多说直接上代码。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div > </div> <div id="myDiv"> <table id="tableExcel" width="100%" class="table table-hover" > <tr> <td colspan="5" align="center">html 表格导出道Excel</td> </tr> <tr> <td>列标题1</td> <td>列标题2</td> <td>类标题3</td> <td>列标题4</td> <td>列标题5</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> <td>eee</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> </tr> <tr> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> </tr> </table><button type="button" class="btn btn-primary center-block" onclick="method5('tableExcel')">导出Excel</button> <!-- <input type="file" class="btn btn-primary center-block" value="请选择输出路径"> --><script type="text/javascript" src="js/jquery-3.1.0.js"></script> <script language="JavaScript" type="text/javascript"> //第五种方法 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)) } })() </script> </div> </body> </html> 但这个示例有两个缺陷，一是导出的表格单元格边框没有样式，二是不能自定义表格名称，所有又进行了改进，以下是改进版本的代码参考。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"></head><body><table id="tableExcel" width="100%" class="table table-hover" > <tr> <td colspan="5" align="center">html 表格导出道Excel</td> </tr> <tr> <td>列标题1</td> <td>列标题2</td> <td>类标题3</td> <td>列标题4</td> <td>列标题5</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> <td>eee</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> </tr> <tr> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> </tr> </table><a id="dlink" style="display:none;"></a><input type="text" name="" value="请输入文件名" class="center-block form-control" style="margin-bottom: 20px; text-align: center" id="submit" onclick="submt()"><input type="button" class="btn btn-primary center-block" onclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="Export to Excel"></body><script>var nnn = "";function submt(){document.getElementById('submit').value="";}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><meta charset="UTF-8"><!--[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("tableExcel") var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } document.getElementById("dlink").href = uri + base64(format(template, ctx)); document.getElementById("dlink").download = document.getElementById('submit').value+'.xls'; document.getElementById("dlink").click(); } })()</script></html>最后感谢完成这个功能的同事
。 0 0
- 学习笔记之js中导出表格到excel详解+源码
- 笔记-将页面中的表格导出到excel中
- js实现html表格导出到excel
- js导出表格数据到word、excel
- js直接导出表格到excel
- js将表格内容导出到excel
- js实现html表格导出到excel
- js实现html表格导出到excel
- js导出页面表格数据到Excel
- DBGrid数据导出到Excel表格中
- jsp表格导出到excel中
- 导出到excel表格
- 导出到excel表格
- 导出到excel表格
- JS导出excel表格
- JS导出excel表格
- js导出excel表格
- js导出excel表格
- spring返回日期数据long类型转化自定义类型
- iOStextview@别人富文本
- leetcode 171 Excel Sheet Column Number
- zk实现分布式锁
- scrollWidth,clientWidth,offsetWidth的区别
- 学习笔记之js中导出表格到excel详解+源码
- photoshop第十二章：制作唯美效果
- MySql避免重复插入记录方法(ignore,Replace,ON DUPLICATE KEY UPDATE)
- java.lang.IllegalArgumentException: No view found for id
- c++ 计算cpu占用率
- android点击Back键不退出程序，在后台运行
- 第一行代码（第二版）之定制自己的日志控制工具
- webpack+react+es2015轻松环境搭建，配置，运行项目
- android 5.0预制APK方法，android5.0预制apk
