zoukankan      html  css  js  c++  java
  • js导出excel方法

      1 js导出Excel
      2 <!DOCTYPE html>
      3 <html>
      4 <head>
      5     <meta charset="UTF-8">
      6     <style type="text/css">
      7         table{border-collapse: collapse; }
      8         th, td{border: 1px solid #4d4d4d;padding: 5px; }
      9     </style>
     10     <script type="text/javascript" language="javascript">
     11         var idTmr;
     12         function  getExplorer() {
     13             var explorer = window.navigator.userAgent ;
     14             //ie
     15             if (explorer.indexOf("MSIE") >= 0) {
     16                 return 'ie';
     17             }
     18             //firefox
     19             else if (explorer.indexOf("Firefox") >= 0) {
     20                 return 'Firefox';
     21             }
     22             //Chrome
     23             else if(explorer.indexOf("Chrome") >= 0){
     24                 return 'Chrome';
     25             }
     26             //Opera
     27             else if(explorer.indexOf("Opera") >= 0){
     28                 return 'Opera';
     29             }
     30             //Safari
     31             else if(explorer.indexOf("Safari") >= 0){
     32                 return 'Safari';
     33             }
     34         }
     35         function method1(tableid) {//整个表格拷贝到EXCEL中
     36             if(getExplorer()=='ie') {
     37                 var curTbl = document.getElementById(tableid);
     38                 var oXL = new ActiveXObject("Excel.Application");
     39 
     40                 //创建AX对象excel
     41                 var oWB = oXL.Workbooks.Add();
     42                 //获取workbook对象
     43                 var xlsheet = oWB.Worksheets(1);
     44                 //激活当前sheet
     45                 var sel = document.body.createTextRange();
     46                 sel.moveToElementText(curTbl);
     47                 //把表格中的内容移到TextRange中
     48                 sel.select;
     49                 //全选TextRange中内容
     50                 sel.execCommand("Copy");
     51                 //复制TextRange中内容
     52                 xlsheet.Paste();
     53                 //粘贴到活动的EXCEL中
     54                 oXL.Visible = true;
     55                 //设置excel可见属性
     56 
     57                 try {
     58                     var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
     59                 } catch (e) {
     60                     print("Nested catch caught " + e);
     61                 } finally {
     62                     oWB.SaveAs(fname);
     63 
     64                     oWB.Close(savechanges = false);
     65                     //xls.visible = false;
     66                     oXL.Quit();
     67                     oXL = null;
     68                     //结束excel进程,退出完成
     69                     //window.setInterval("Cleanup();",1);
     70                     idTmr = window.setInterval("Cleanup();", 1);
     71                 }
     72             } else {
     73                 tableToExcel('ta')
     74             }
     75         }
     76         function Cleanup() {
     77             window.clearInterval(idTmr);
     78             CollectGarbage();
     79         }
     80 
     81         /*
     82             template : 定义文档的类型,相当于html页面中顶部的<!DOCTYPE> 声明。(个人理解,不确定)
     83             encodeURIComponent:解码
     84             unescape() 函数:对通过 escape() 编码的字符串进行解码。
     85             window.btoa(window.encodeURIComponent(str)):支持汉字进行解码。
     86             w :匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’
     87             replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
     88             {(w+)}:匹配所有 {1个或更多字符} 形式的字符串;此处匹配输出内容是 “worksheet”
     89             正则中的() :是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。
     90             讲解(/{(w+)}/g, function(m, p) { return c[p]; } :
     91                 /{(w+)}/g 匹配出所有形式为“{worksheet}”的字符串;
     92                 function参数:  m  正则所匹配到的内容,即“worksheet”;
     93                                 p  正则表达式中分组的内容,即“(w+)”分组中匹配到的内容,为“worksheet”;
     94                 c :为object,见下图3
     95                 c[p] : 为“worksheet”
     96 
     97         */
     98         var tableToExcel = (function() {
     99 /* 
    100 * 设置样式 有2个方法 1.直接写style 属性 2.在模板中加样式代码 如下
    101 * */
    102             var uri = 'data:application/vnd.ms-excel;base64,',
    103             //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>',
    104             template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
    105             'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
    106             + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
    107             + '</x:ExcelWorkbook></xml><![endif]-->' +
    108             ' <style type="text/css">' +
    109             'table td {' +
    110             'border: 1px solid #000000;' +
    111             ' 200px;' +
    112             'height: 30px;' +
    113             ' text-align: center;' +
    114             'background-color: #4f891e;' +
    115             'color: #ffffff;' +
    116             ' }' +
    117             '</style>' +
    118             '</head><body ><table class="excelTable">{table}</table></body></html>';
    119             base64 = function(s) {
    120                 return window.btoa(unescape(encodeURIComponent(s)))
    121             },
    122             // 下面这段函数作用是:将template中的变量替换为页面内容ctx获取到的值
    123             format = function(s, c) {
    124                     return s.replace(/{(w+)}/g,
    125                                     function(m, p) {
    126                                         return c[p];
    127                                     }
    128                     )
    129             };
    130             return function(table, name) {
    131                 if (!table.nodeType) {
    132                     table = document.getElementById(table)
    133                 }
    134                 // 获取表单的名字和表单查询的内容
    135                 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
    136                 // format()函数:通过格式操作使任意类型的数据转换成一个字符串
    137                 // base64():进行编码
    138                 window.location.href = uri + base64(format(template, ctx))
    139 // 下面这个是自定义文件名的
    140 document.getElementById("exportExcel").href = uri
    141                 + base64(format(template, ctx));
    142         document.getElementById("exportExcel").download = name + ".xls";//自定义文件名
    143         document.getElementById("exportExcel").click();          }
    144         })()
    145     </script>
    146 
    147 </head>
    148 <body>
    149     <table id="ta">
    150         <tr>
    151             <th></th>
    152             <th></th>
    153             <th></th>
    154             <th></th>
    155             <th></th>
    156         </tr>
    157         <tr>
    158             <td>万籁寂无声</td>
    159             <td>衾铁棱棱近五更</td>
    160             <td>香断灯昏吟未稳</td>
    161             <td>凄清</td>
    162             <td>只有霜华伴月明</td>
    163         </tr>
    164         <tr>
    165             <td>应是夜寒凝</td>
    166             <td>恼得梅花睡不成</td>
    167             <td>我念梅花花念我</td>
    168             <td>关情</td>
    169             <td>起看清冰满玉瓶</td>
    170         </tr>
    171     </table>
    172     <br/>
    173     <input type="button" value="导出EXCEL" onclick="method1('ta')" />
    174 </body>
    175 </html>
  • 相关阅读:
    将文件写进数据库的方法
    立个Flag
    JQuery_学习1
    js制作一个简单的选项卡
    输出数据库中的表格的内容(pdo连接)
    不饮鸡汤的寂寞先生
    详细谈Session
    详细谈Cookie
    php字符串操作函数练习2
    ios开发网络学习五:MiMEType ,多线程下载文件思路,文件的压缩和解压缩
  • 原文地址:https://www.cnblogs.com/MythLeige/p/11016805.html
Copyright © 2011-2022 走看看