产品原型：

图片.png

功能需求：点击导出考勤表格按钮，会自动下载成Excel格式

图片.png
图片.png

jsp页面代码：

  1. <div class="tools">
  2. <button type="button" class="btn green" id="excell"  onclick="method5('dataTable')">导出考勤表</button>
  3. </div>

js代码

  1. //打印表格
  2. var idTmr;
  3. function  getExplorer() {
  4.     var explorer = window.navigator.userAgent ;
  5.     //ie
  6.     if (explorer.indexOf("MSIE") >= 0) {
  7.             return 'ie';
  8.         }
  9.         //firefox
  10.         else if (explorer.indexOf("Firefox") >= 0) {
  11.             return 'Firefox';
  12.         }
  13.         //Chrome
  14.         else if (explorer.indexOf("Chrome") >= 0) {
  15.             return 'Chrome';
  16.         }
  17.         //Opera
  18.         else if (explorer.indexOf("Opera") >= 0) {
  19.             return 'Opera';
  20.         }
  21.         //Safari
  22.         else if (explorer.indexOf("Safari") >= 0) {
  23.             return 'Safari';
  24.         }
  25.     }
  26.     function method5(tableid) {
  27.         if (getExplorer() == 'ie') {
  28.             var curTbl = document.getElementById(tableid);
  29.             var oXL = new ActiveXObject("Excel.Application");
  30.             var oWB = oXL.Workbooks.Add();
  31.             var xlsheet = oWB.Worksheets(1);
  32.             var sel = document.body.createTextRange();
  33.             sel.moveToElementText(curTbl);
  34.             sel.select();
  35.             sel.execCommand("Copy");
  36.             xlsheet.Paste();
  37.             oXL.Visible = true;
  39.             try {
  40.                 var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
  41.                         "Excel Spreadsheets (*.xls), *.xls");
  42.             } catch (e) {
  43.                 print("Nested catch caught " + e);
  44.             } finally {
  45.                 oWB.SaveAs(fname);
  46.                 oWB.Close(savechanges = false);
  47.                 oXL.Quit();
  48.                 oXL = null;
  49.                 idTmr = window.setInterval("Cleanup();", 1);
  50.             }
  52.         } else {
  53.             tableToExcel(tableid)
  54.         }
  55.     }
  56.     function Cleanup() {
  57.         window.clearInterval(idTmr);
  58.         CollectGarbage();
  59.     }
  60.     var tableToExcel = (function() {
  61.         var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>', base64 = function(
  62.                 s) {
  63.             return window.btoa(unescape(encodeURIComponent(s)))
  64.         }, format = function(s, c) {
  65.             return s.replace(/{(\w+)}/g, function(m, p) {
  66.                 return c[p];
  67.             })
  68.         }
  69.         return function(table, name) {
  70.             if (!table.nodeType)
  71.                 table = document.getElementById(table)
  72.             var ctx = {
  73.                 worksheet : name || 'Worksheet',
  74.                 table : table.innerHTML
  75.             }
  76.             window.location.href = uri + base64(format(template, ctx))
  77.         }
  78.     })()

完整的可复制黏贴的demo：

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  9.     <body>
  10.         <div class="tools">
  11.             <button type="button" class="btn green" id="excell" onclick="method5('dataTable')">导出考勤表格</button>
  12.         </div>
  14.         <table border="1" id="dataTable">
  15.             <tr>
  16.                 <td>王婷111</td>
  17.                 <td>一见倾城333 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td>祈澈姑娘222</td>
  21.                 <td>Python开发者交流平台44</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>wwwangting888</td>
  25.                 <td>13661725475</td>
  26.             </tr>
  27.         </table>
  29.     </body>
  30.     <script>
  31.         //打印表格
  32.         var idTmr;
  34.         function getExplorer() {
  35.             var explorer = window.navigator.userAgent;
  36.             //ie
  37.             if(explorer.indexOf("MSIE") >= 0) {
  38.                 return 'ie';
  39.             }
  40.             //firefox
  41.             else if(explorer.indexOf("Firefox") >= 0) {
  42.                 return 'Firefox';
  43.             }
  44.             //Chrome
  45.             else if(explorer.indexOf("Chrome") >= 0) {
  46.                 return 'Chrome';
  47.             }
  48.             //Opera
  49.             else if(explorer.indexOf("Opera") >= 0) {
  50.                 return 'Opera';
  51.             }
  52.             //Safari
  53.             else if(explorer.indexOf("Safari") >= 0) {
  54.                 return 'Safari';
  55.             }
  56.         }
  58.         function method5(tableid) {
  59.             if(getExplorer() == 'ie') {
  60.                 var curTbl = document.getElementById(tableid);
  61.                 var oXL = new ActiveXObject("Excel.Application");
  62.                 var oWB = oXL.Workbooks.Add();
  63.                 var xlsheet = oWB.Worksheets(1);
  64.                 var sel = document.body.createTextRange();
  65.                 sel.moveToElementText(curTbl);
  66.                 sel.select();
  67.                 sel.execCommand("Copy");
  68.                 xlsheet.Paste();
  69.                 oXL.Visible = true;
  71.                 try {
  72.                     var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
  73.                         "Excel Spreadsheets (*.xls), *.xls");
  74.                 } catch(e) {
  75.                     print("Nested catch caught " + e);
  76.                 } finally {
  77.                     oWB.SaveAs(fname);
  78.                     oWB.Close(savechanges = false);
  79.                     oXL.Quit();
  80.                     oXL = null;
  81.                     idTmr = window.setInterval("Cleanup();", 1);
  82.                 }
  84.             } else {
  85.                 tableToExcel(tableid)
  86.             }
  87.         }
  89.         function Cleanup() {
  90.             window.clearInterval(idTmr);
  91.             CollectGarbage();
  92.         }
  93.         var tableToExcel = (function() {
  94.             var uri = 'data:application/vnd.ms-excel;base64,',
  95.                 template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
  96.                 base64 = function(
  97.                     s) {
  98.                     return window.btoa(unescape(encodeURIComponent(s)))
  99.                 },
  100.                 format = function(s, c) {
  101.                     return s.replace(/{(\w+)}/g, function(m, p) {
  102.                         return c[p];
  103.                     })
  104.                 }
  105.             return function(table, name) {
  106.                 if(!table.nodeType)
  107.                     table = document.getElementById(table)
  108.                 var ctx = {
  109.                     worksheet: name || 'Worksheet',
  110.                     table: table.innerHTML
  111.                 }
  112.                 window.location.href = uri + base64(format(template, ctx))
  113.             }
  114.         })()
  115.     </script>
  117. </html>

==================================================================

注意：本文原创作者祈澈姑娘，创作不易。转载请标明作者和文章的原文链接，或到微信公众号获取授权。

前端js实现打印（导出）excel表格的更多相关文章

  1. 多个浏览器下应用前端JS实现一键导出excel表

    自己试验了几种方法,找到一种较为全面的一种方式一键输出Excel表格,代码如下 <!DOCTYPE html> <html> <head lang="en&qu ...

  2. 前端JS实现一键导入excel表格

    前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并在网页端显示. 代码部分: <!DOCTYPE html> <html> <h ...

  3. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  4. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  5. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  6. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

  7. html js 导出excel表格

    这个使用js 导出excel,可以集成其他语言,可以html,php,asp ,java 等,自己喜欢用那种语言就用哪种,使用非常方便.js是使用tableExport.js ,jquery-3.2. ...

  8. js导出excel表格中较长数字串会变成科学计数法问题

    在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...

  9. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  10. PHP导入导出excel表格图片(转)

    写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...

随机推荐

  1. Web页面转换成Word文件，利用wordXML

    简介:处理流程表单数据以WordXML形式填充Word文档表格换行符丢失问题 //将前台收集的XML中“$”循环拆分成"<w:br/>" by pengyc 解决表格填 ...

  2. JavaScript学习总结（4）——JavaScript数组

    JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...

  3. chrome 的input 上传响应慢问题解决方案

    <input type="file" accept="image/png,image/jpeg,image/gif" class="form-c ...

  4. java线程——详解Callable、Future和FutureTask

    回顾: 接上篇博客 java线程--三种创建线程的方式,这篇博客主要介绍第三种方式Callable和Future.比较继承Thread类和实现Runnable接口,接口更加灵活,使用更广泛.但这两种方 ...

  5. Android中Application类的详解：

    Android中Application类的详解: 我们在平时的开发中,有时候可能会须要一些全局数据.来让应用中的全部Activity和View都能訪问到.大家在遇到这样的情况时,可能首先会想到自定义一 ...

  6. 小贝_redis web管理界面工具安装

    RedisWEB管理界面工具安装 一.概述 二.文件下载 三.安装过程 一.概述 1.因为redis是基于C/S的方式开发.也就是说,仅仅要满足于redis的client通信要求的,都能够作为redi ...

  7. 【Codeforces Round #445 (Div. 2) A】ACM ICPC

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 三重循环 [代码] #include <bits/stdc++.h> using namespace std; int ...

  8. 仿oschina 主界面的实现（二） -------Toolbar + DrawerLayout

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  9. Playing with coroutines and Qt

    你好!我最近想知道C ++中的协程的状态,我发现了几个实现.我决定选择一个用于我的实验.它简单易用,适用于Linux和Windows. 我的目标是试图找到一种方法来让代码异步运行,而不必等待信号触发插 ...

  10. RTC时钟和BKP的配置stm32

    摘自:https://blog.csdn.net/gtkknd/article/details/52233605 RTC和后备寄存器通过一个开关供电,在VDD有效的时候选择VDD供电,否则选择VBAT ...