脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js前端导出Excel的方法

js前端导出Excel的方法

 更新时间：2017年11月01日 10:33:55   作者：QiaoRui_  
这篇文章主要为大家详细介绍了js前端导出Excel的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

需求：

要求把项目中的table表格导出Excel

需求分析及解决：

既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出，也可以是后端导出（技术包括POI或者报表工具等），这篇文章主
要是网上找的前端导出，既然是前端导出又是报表就需要有数据，所以数据都需要你提前做好相应填充

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title>html 表格导出</title> 
 <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'; 
   } 
  } 
   
 //获取到类型需要判断当前浏览器需要调用的方法，目前项目中火狐，谷歌，360没有问题 
  //win10自带的IE无法导出 
  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(); 
  } 
   
 //判断浏览器后调用的方法，把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')">导出Excel</button> 
</div> 
<div id="myDiv"> 
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> 
 <tr> 
  <td colspan="5" align="center">html 表格导出道Excel</td> 
 </tr> 
 <tr> 
   
  <td>列标题</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>

 重点：

把此代码复制到记事本，命名为.html文件，用浏览器打开即可查看是否可以导出，如果可以导入项目中，把数据填充即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Javascript 错误处理的几种方法

    Javascript 错误处理的几种方法

    浏览器不会抛出Error类型的exception异常，所以如果捕获到Error类型的异常，可以确定这个异常是用户代码抛出的，不是浏览器抛出的。
    2009-06-06
  • javascript代码压缩工具的原理

    javascript代码压缩工具的原理

    JavaScript代码压缩对代码进行一系列优化处理,从而减小代码的体积,提高网页的加载速度,JavaScript代码压缩的原理包含去除代码中的空格、注释、不必要的换行符等无用字符,压缩变量名、压缩函数名等操作,将一些常见的操作(如+、-、*、/)转换成更短的操作符(如@、^、#、|)
    2023-12-12
  • 一个简单的全屏图片上下打开显示网页效果示例

    一个简单的全屏图片上下打开显示网页效果示例

    这是一个简单的全屏图片上下打开显示网页效果，源码如下，喜欢的朋友可以练练手
    2014-07-07
  • JavaScript重复元素处理方法分析【统计个数、计算、去重复等】

    JavaScript重复元素处理方法分析【统计个数、计算、去重复等】

    这篇文章主要介绍了JavaScript重复元素处理方法,结合实例形式分析了javascript针对字符串、数组中重复元素的个数统计,计算及去重复等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • JS基于VUE组件实现城市列表效果

    JS基于VUE组件实现城市列表效果

    这篇文章主要为大家详细介绍了JS基于VUE组件实现城市列表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Javascript循环删除数组中元素的几种方法示例

    Javascript循环删除数组中元素的几种方法示例

    这篇文章主要给大家介绍了关于Javascript循环删除数组中元素的几种方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • js中获取事件对象的方法小结

    js中获取事件对象的方法小结

    事件对象 的获取很简单，很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定
    2011-03-03
  • JS实现获取进今年第几天是周几的方法分析

    JS实现获取进今年第几天是周几的方法分析

    这篇文章主要介绍了JS实现获取进今年第几天是周几的方法,结合实例形式对比分析了JavaScript进行日期与天数运算相关操作技巧与注意事项,需要的朋友可以参考下
    2018-06-06
  • 11个ES13中令人惊叹的JavaScript新特性总结

    11个ES13中令人惊叹的JavaScript新特性总结

    与许多其他编程语言一样,JavaScript 也在不断发展,小编今天就为大家介绍ES13中添加的最新功能,并查看其用法示例以更好地理解它们,有需要的小伙伴可以了解下
    2023-09-09
  • JavaScript iframe 实现多窗口通信实例详解

    JavaScript iframe 实现多窗口通信实例详解

    这篇文章主要为大家介绍了JavaScript iframe 实现多窗口通信实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论