首页
所有分类
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文件的代码
Jul 18 Javascript
javaScript 简单验证代码（用户名，密码，邮箱)
Sep 28 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
vue组件间通信解析
Mar 01 Javascript
js实现三级联动效果（简单易懂）
Mar 27 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 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
德生G88(1) ICF-F10(1) 纸巾盒(1) 德生1994(1) AE3805(1) PR-D3L(1) ICF-SW100(1) 天梯图(1) CPU(2) SRF-40W(1)
You might like
一些关于PHP的知识
2006/11/17 PHP
使用PHP数组实现无限分类，不使用数据库，不使用递归.
2006/12/09 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
phpwind放自动注册方法
2006/12/02 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jquery attr 设定src中含有&amp;（宏）符号问题的解决方法
2011/07/26 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
Javascript玩转继承（三）
2014/05/08 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
简单了解python模块概念
2018/01/11 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python 实现一个计时器
2020/07/28 Python
Pandas替换及部分替换（replace）实现流程详解
2020/10/12 Python
Belvilla德国：在线预订度假屋
2018/04/10 全球购物
固特异美国在线轮胎店：Goodyear Tire
2019/02/23 全球购物
Madewell澳大利亚官方网站：美国休闲服饰品牌
2019/07/18 全球购物
教师专业自荐书范文
2014/02/10 职场文书
产品开发计划书
2014/04/27 职场文书
大学开学计划书
2014/04/30 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL