静态表格 table
- <table class="table tableStyles" id="tables">
- <caption > 不正经的统计表 </caption><!-- 可以生成表格的标题 -->
- <thead>
- <tr>
- <th > 品牌 </th>
- <th > 门店 </th>
- <th > 本周回访 </th>
- <th > 本月回访 </th>
- <th > 总回访 </th>
- <th > 本周成交数 </th>
- <th > 本月成交数 </th>
- <th > 总成交数 </th>
- <th > 异常量 </th>
- <th > 成交转化率 </th>
- <th > 经手人 / th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="3"> 华为 </td>
- <td > 华为深圳店 </td>
- <td>20</td>
- <td>80</td>
- <td>500</td>
- <td>1</td>
- <td>3</td>
- <td>20</td>
- <td>1</td>
- <td>4.0%</td>
- <td > 黄生 </td>
- </tr>
- <tr>
- <td > 华为东莞店 </td>
- <td>20</td>
- <td>80</td>
- <td>500</td>
- <td>1</td>
- <td>3</td>
- <td>20</td>
- <td>1</td>
- <td>4.0%</td>
- <td > 黄生 </td>
- </tr>
- <tr>
- <td > 华为佛山店 </td>
- <td>20</td>
- <td>80</td>
- <td>500</td>
- <td>1</td>
- <td>3</td>
- <td>20</td>
- <td>1</td>
- <td>4.0%</td>
- <td > 黄生 </td>
- </tr>
- <tr>
- <td rowspan="3"> 小米 </td>
- <td > 米家深圳店 </td>
- <td>20</td>
- <td>80</td>
- <td>500</td>
- <td>1</td>
- <td>3</td>
- <td>20</td>
- <td>1</td>
- <td>4.0%</td>
- <td > 林生 </td>
- </tr>
- </tbody>
- </table>
2.JS 代码
1利用 html5 的 download 属性, 点击下载该文件
- <a id="dlink" style="display:none;"></a>
- <input type="button" onclick="tableToExcel('tables','name','myfile.xls')" value="Export to Excel">
- <script type="text/javascript">
- 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><!--[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 Windows.btoa(unescape(encodeURIComponent(s))) },
- format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
- return function (table, name, filename) {
- if (!table.nodeType) table = document.getElementById(table)
- var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
- document.getElementById("dlink").href = uri + base64(format(template, ctx));
- document.getElementById("dlink").download = filename;
- document.getElementById("dlink").click();
- }
- })()
- </script>
2创建 ActiveXObject 对象复制到表格中
- 1 <input id="Button1" type="button" value="导出 EXCEL" onclick="javascript:excels('tables')" />
- <script type="text/javascript">
- var timer;
- function getExplorer(){// 获取浏览器
- var explorer=Windows.navigator.userAgent;
- if(explorer.indexOf("MSIE")>= 0|| (explorer.indexOf("Windows NT 6.1;")>= 0 && explorer.indexOf("Trident/7.0;")>= 0)){
- return 'ie';
- }else if (explorer.indexOf("Firefox")>= 0) {
- return 'Firefox';
- }else if(explorer.indexOf("Chrome")>= 0){
- return 'Chrome';
- }else if(explorer.indexOf("Opera")>= 0){
- return 'Opera';
- }else if(explorer.indexOf("Safari")>= 0){
- return 'Safari';
- }
- }
- function excels(table){
- if(getExplorer()=='ie'){
- var curTbl = document.getElementById(table);
- var oXl=new ActiveXObject("Excel.Application");// 创建 AX 对象 Excel
- var oWB = oXL.Workbooks.Add();// 获取 workbook 对象
- var xlsheet = oWB.Worksheets(1);// 激活当前 sheet
- var sel = document.body.createTextRange();
- sel.moveToElementText(curTbl);// 把表格中的内容移到 TextRange 中
- sel.select;// 全选 TextRange 中内容
- sel.execCommand("Copy");// 复制 TextRange 中内容
- xlsheet.Paste();// 粘贴到活动的 Excel 中
- oXL.Visible = true;// 设置 Excel 可见属性
- try{
- var filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
- }catch(e){
- Windows.print("Nested catch caught" + e);
- }finally{
- oWB.SaveAs(filename);
- oWB.Close(savechanges = false);
- oXL.Quit();
- oXL = null;// 结束 Excel 进程, 退出完成
- timer = Windows.setInterval("Cleanup();", 1);
- }
- }else{
- tableToExcel("tables");
- }
- }
- function Cleanup(){
- Windows.clearInterval(timer);
- CollectGarbage();//CollectGarbage, 是 IE 的一个特有属性, 用于释放内存的
- }
- 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><!--[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 Windows.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};
- Windows.location.href = uri + base64(format(template, ctx))
- }
- })();
- </script>
1. 真正起到作用的是 a 标签的属性, input 按钮只是起到了一个过渡到 download 属性的作用;
其中有编码解码, 需要注意中文乱码情况;
测试只有谷歌和火狐起作用, 且只有谷歌下载的文件名是 "下载. xls", 火狐的文件名像是编码后的~
双核浏览器当然也只有 Chrome 内核下有效果~~
还有其他的问题是我继续需要想的, 表格内容分页情况导出? 筛选条件后导出全部? 等等等~
附上源码注释地址:
开发过程中有很多预料不到的事, 继续加油吧!
~~~~~~~~~~~~ 剩到最后的解决办法是利用插件~~~~~~~~~~~~
比如 GitHub 上的
- 1020 Star:https://github.com/kayalshri/tableExport.jquery.plugin
- 270 Star:https://github.com/clarketm/TableExport
- 159 Star:https://github.com/huanz/tableExport
说明一下, 星星多的插件是有 base64 编码, 所以还额外需要 JS 脚本!
个人比较喜欢最少星星的库, 感觉明了清晰, 可以按需加载~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
原创地址
来源: https://www.cnblogs.com/lubolin/p/10767355.html