表格数据导出到excel

最新推荐文章于 2022-03-30 15:58:52 发布

越简单越好

最新推荐文章于 2022-03-30 15:58:52 发布

阅读量298

点赞数

在系统开发中，经常会遇到要将一个表格数据导出到excel中，刚刚做完，把示例代码共享一下，话不多说直接上代码。

[html]view plain copy 
   
 <!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>    

但这个示例有两个缺陷，一是导出的表格单元格边框没有样式，二是不能自定义表格名称，所有又进行了改进，以下是改进版本的代码参考。

[html]view plain copy 
   
 <!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>  