快捷導(dǎo)航

js前端導(dǎo)出Excel的方法

更新時(shí)間：2017年11月01日 10:33:55 作者：QiaoRui_

這篇文章主要為大家詳細(xì)介紹了js前端導(dǎo)出Excel的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

需求：

要求把項(xiàng)目中的table表格導(dǎo)出Excel

需求分析及解決：

既然需要導(dǎo)出，是報(bào)表的可能性比較大，我的項(xiàng)目中就是這樣，那既然是報(bào)表導(dǎo)出，可以是前端導(dǎo)出，也可以是后端導(dǎo)出（技術(shù)包括POI或者報(bào)表工具等），這篇文章主
要是網(wǎng)上找的前端導(dǎo)出，既然是前端導(dǎo)出又是報(bào)表就需要有數(shù)據(jù)，所以數(shù)據(jù)都需要你提前做好相應(yīng)填充

代碼：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title>html 表格導(dǎo)出</title> 
 <script language="JavaScript" type="text/javascript"> 
  
  
  var idTmr; 
 //獲取當(dāng)前瀏覽器類型 
  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'; 
   } 
  } 
   
 //獲取到類型需要判斷當(dāng)前瀏覽器需要調(diào)用的方法，目前項(xiàng)目中火狐，谷歌，360沒有問題 
  //win10自帶的IE無法導(dǎo)出 
  function exportExcel(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(); 
  } 
   
 //判斷瀏覽器后調(diào)用的方法，把table的id傳入即可 
  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> 
</head> 
<body> 
 
<div > 
  
 <button type="button" onclick="exportExcel('tableExcel')">導(dǎo)出Excel</button> 
</div> 
<div id="myDiv"> 
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> 
 <tr> 
  <td colspan="5" align="center">html 表格導(dǎo)出道Excel</td> 
 </tr> 
 <tr> 
   
  <td>列標(biāo)題</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> 
</div> 
</body> 
</html>

重點(diǎn)：

把此代碼復(fù)制到記事本，命名為.html文件，用瀏覽器打開即可查看是否可以導(dǎo)出，如果可以導(dǎo)入項(xiàng)目中，把數(shù)據(jù)填充即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: