首页
所有分类
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中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
Javascript Promise用法详解
May 10 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
Javascript实现单选框效果
Dec 09 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
Sqlite(2) 安卓(1) 嵌套(1) 循环(3) IDEA(2) android studio(3) OpenLayer(1) 多维数组(1) 移动开发(2) 二维数组(2)
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript 随机展示头像实现代码
2011/12/06 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
解读ES6中class关键字
2017/11/20 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python 解析XML文件
2009/04/15 Python
python中pygame模块用法实例
2014/10/09 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python 密码学示例——理解哈希（Hash）算法
2020/09/21 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Bodum官网：咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
盛大笔试题
2016/11/05 面试题
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
摩登时代观后感
2015/06/03 职场文书
死亡诗社观后感
2015/06/05 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
python绘制箱型图
2021/04/27 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python