首页
所有分类
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 相关文章推荐
JS Timing
Apr 21 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Angular排序实例详解
Jun 28 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
puppeteer库入门初探
Jan 09 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
MIME(1) 优化(1) redo log(1) instantclient(1) 增删改查(2) 写入策略(1) binlog(2) 抖音(1) 存储过程(3) B+树(2)
You might like
php二分法在IP地址查询中的应用
2008/08/12 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
微信小程序 后台登录（非微信账号）实例详解
2017/03/31 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
layui实现三级联动效果
2019/07/26 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python生成器以及应用实例解析
2018/02/08 Python
python爬虫基础教程：requests库（二）代码实例
2019/04/09 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Microsoft Advertising美国：微软搜索广告
2019/05/01 全球购物
人力资源管理求职信
2014/08/07 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android