首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现导出Excel的五种方法详解【附源码下载】

Posted in Javascript onMarch 15, 2018

本文实例讲述了JS实现导出Excel的五种方法。分享给大家供大家参考，具体如下：

这五种方法前四种方法只支持IE浏览器，最后一个方法支持当前主流的浏览器（火狐，IE，Chrome，Opera，Safari）

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>html 表格导出道</title>
  <script language="JavaScript" type="text/javascript">
    //第一种方法
    function method1(tableid) {
      var curTbl = document.getElementById(tableid);
      var oXL = new ActiveXObject("Excel.Application");
      var oWB = oXL.Workbooks.Add();
      var oSheet = oWB.ActiveSheet;
      var sel = document.body.createTextRange();
      sel.moveToElementText(curTbl);
      sel.select();
      sel.execCommand("Copy");
      oSheet.Paste();
      oXL.Visible = true;
    }
    //第二种方法
    function method2(tableid)
    {
      var curTbl = document.getElementById(tableid);
      var oXL = new ActiveXObject("Excel.Application");
      var oWB = oXL.Workbooks.Add();
      var oSheet = oWB.ActiveSheet;
      var Lenr = curTbl.rows.length;
      for (i = 0; i < Lenr; i++)
      {    var Lenc = curTbl.rows(i).cells.length;
        for (j = 0; j < Lenc; j++)
        {
          oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
        }
      }
      oXL.Visible = true;
    }
    //第三种方法
    function getXlsFromTbl(inTblId, inWindow){
      try {
        var allStr = "";
        var curStr = "";
        if (inTblId != null && inTblId != "" && inTblId != "null") {
          curStr = getTblData(inTblId, inWindow);
        }
        if (curStr != null) {
          allStr += curStr;
        }
        else {
          alert("你要导出的表不存在");
          return;
        }
        var fileName = getExcelFileName();
        doFileExport(fileName, allStr);
      }
      catch(e) {
        alert("导出发生异常:" + e.name + "->" + e.description + "!");
      }
    }
    function getTblData(inTbl, inWindow) {
      var rows = 0;
      var tblDocument = document;
      if (!!inWindow && inWindow != "") {
        if (!document.all(inWindow)) {
          return null;
        }
        else {
          tblDocument = eval(inWindow).document;
        }
      }
      var curTbl = tblDocument.getElementById(inTbl);
      var outStr = "";
      if (curTbl != null) {
        for (var j = 0; j < curTbl.rows.length; j++) {
          for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
            if (i == 0 && rows > 0) {
              outStr += " t";
              rows -= 1;
            }
            outStr += curTbl.rows[j].cells[i].innerText + "t";
            if (curTbl.rows[j].cells[i].colSpan > 1) {
              for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                outStr += " t";
              }
            }
            if (i == 0) {
              if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                rows = curTbl.rows[j].cells[i].rowSpan - 1;
              }
            }
          }
          outStr += "rn";
        }
      }
      else {
        outStr = null;
        alert(inTbl + "不存在 !");
      }
      return outStr;
    }
    function getExcelFileName() {
      var d = new Date();
      var curYear = d.getYear();
      var curMonth = "" + (d.getMonth() + 1);
      var curDate = "" + d.getDate();
      var curHour = "" + d.getHours();
      var curMinute = "" + d.getMinutes();
      var curSecond = "" + d.getSeconds();
      if (curMonth.length == 1) {
        curMonth = "0" + curMonth;
      }
      if (curDate.length == 1) {
        curDate = "0" + curDate;
      }
      if (curHour.length == 1) {
        curHour = "0" + curHour;
      }
      if (curMinute.length == 1) {
        curMinute = "0" + curMinute;
      }
      if (curSecond.length == 1) {
        curSecond = "0" + curSecond;
      }
      var fileName = "table" + "_" + curYear + curMonth + curDate + "_"
          + curHour + curMinute + curSecond + ".csv";
      return fileName;
    }
    function doFileExport(inName, inStr) {
      var xlsWin = null;
      if (!!document.all("glbHideFrm")) {
        xlsWin = glbHideFrm;
      }
      else {
        var width = 6;
        var height = 4;
        var openPara = "left=" + (window.screen.width / 2 - width / 2)
            + ",top=" + (window.screen.height / 2 - height / 2)
            + ",scrollbars=no,width=" + width + ",height=" + height;
        xlsWin = window.open("", "_blank", openPara);
      }
      xlsWin.document.write(inStr);
      xlsWin.document.close();
      xlsWin.document.execCommand('Saveas', true, inName);
      xlsWin.close();
    }
    //第四种
    function method4(tableid){
      var curTbl = document.getElementById(tableid);
      var oXL;
      try{
        oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel
      }catch(e){
        alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");
        return false;
      }
      var oWB = oXL.Workbooks.Add(); //获取workbook对象
      var oSheet = oWB.ActiveSheet;//激活当前sheet
      var sel = document.body.createTextRange();
      sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中
      sel.select(); //全选TextRange中内容
      sel.execCommand("Copy");//复制TextRange中内容
      oSheet.Paste();//粘贴到活动的EXCEL中
      oXL.Visible = true; //设置excel可见属性
      var fname = oXL.Application.GetSaveAsFilename("将table导出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");
      oWB.SaveAs(fname);
      oWB.Close();
      oXL.Quit();
    }
    //第五种方法
    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>
</head>
<body>
<div >
  <button type="button" onclick="method1('tableExcel')">导出Excel方法一</button>
  <button type="button" onclick="method2('tableExcel')">导出Excel方法二</button>
  <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv')">导出Excel方法三</button>
  <button type="button" onclick="method4('tableExcel')">导出Excel方法四</button>
  <button type="button" onclick="method5('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>列标题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>
</div>
</body>
</html>

今天上来发现，好多人，会遇到文件名，格式等问题。这里添加一种方法。兼容性我没有测试，大家可以试下，不过需要利用JQ直接贴代码了。源代码可点击此处本站下载。注意一定要引jquery-3.2.1.min.js，jquery.table2excel.js对应的文件。jquery-3.2.1.min.js这个看你对应的文件版本，不重要。如有问题，欢迎批评指导。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>html 表格导出道</title>
  <script src="js/vendor/jquery-3.2.1.min.js"></script>
  <script src="jquery.table2excel.js"></script>
  <script language="JavaScript" type="text/javascript">
    $(document).ready(function () {
      $("#btnExport").click(function () {
        $("#tableExcel").table2excel({
          exclude : ".noExl", //过滤位置的 css 类名
          filename : "你想说啥" + new Date().getTime() + ".xls", //文件名称
          name: "Excel Document Name.xlsx",
          exclude_img: true,
          exclude_links: true,
          exclude_inputs: true
        });
      });
    });
  </script>
</head>
<body>
<div >
  <button type="button" id="btnExport" onclick="method5('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>列标题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>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现导出Excel的五种方法详解【附源码下载】

- Author -

王志豪灬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
Mar 16 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
常用的 JS 排序算法 整理版
Apr 05 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
JS实现横向轮播图（初级版）
Jun 24 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
Angularjs Promise实例详解
Mar 15 #Javascript
p5.js入门教程和基本形状绘制
Mar 15 #Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 #Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 #Javascript
证婚词(21) 心得体会(660) 道歉信(39) 职业生涯规划书(234) 欢迎词(65) 岗位职责(1324) 介绍信(57) 演讲稿(869) 创业计划书(312) 思想汇报(404)
You might like
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP登录（ajax提交数据和后台校验）实例分享
2016/12/29 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
不得不分享的JavaScript常用方法函数集（下）
2015/12/25 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解vue-router 路由元信息
2017/09/13 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
理解python正则表达式
2016/01/15 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
django中ImageField的使用详解
2020/12/21 Python
HTTP状态码详解
2021/03/18 杂记
香港莎莎官网Sasa.com：亚洲著名国际化妆品商城
2019/11/10 全球购物
澳大利亚在线奢侈品时尚零售平台：Azura Runway
2021/01/13 全球购物
爱牙日活动总结
2014/08/29 职场文书
亮剑精神观后感
2015/06/05 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
旅游安全责任协议书
2016/03/22 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js