前端js实现打印（导出）excel表格
产品原型：
功能需求：点击导出考勤表格按钮，会自动下载成Excel格式
jsp页面代码：
<div class="tools">
<button type="button" class="btn green" id="excell" onclick="method5('dataTable')">导出考勤表</button>
</div>
js代码
//打印表格
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 border="1">{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))
}
})()
完整的可复制黏贴的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="tools">
<button type="button" class="btn green" id="excell" onclick="method5('dataTable')">导出考勤表格</button>
</div>
<table border="1" id="dataTable">
<tr>
<td>王婷111</td>
<td>一见倾城333 </td>
</tr>
<tr>
<td>祈澈姑娘222</td>
<td>Python开发者交流平台44</td>
</tr>
<tr>
<td>wwwangting888</td>
<td>13661725475</td>
</tr>
</table>
</body>
<script>
//打印表格
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 border="1">{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>
</html>
==================================================================
注意：本文原创作者祈澈姑娘，创作不易。转载请标明作者和文章的原文链接，或到微信公众号获取授权。
前端js实现打印（导出）excel表格的更多相关文章
- 多个浏览器下应用前端JS实现一键导出excel表
自己试验了几种方法,找到一种较为全面的一种方式一键输出Excel表格,代码如下 <!DOCTYPE html> <html> <head lang="en&qu ...
- 前端JS实现一键导入excel表格
前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并在网页端显示. 代码部分: <!DOCTYPE html> <html> <h ...
- 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; ...
- vue 纯前端导出 excel 表格
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...
- # vue 如何通过前端来导出excel表格
在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...
- js导出Excel表格
js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...
- html js 导出excel表格
这个使用js 导出excel,可以集成其他语言,可以html,php,asp ,java 等,自己喜欢用那种语言就用哪种,使用非常方便.js是使用tableExport.js ,jquery-3.2. ...
- js导出excel表格中较长数字串会变成科学计数法问题
在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...
- 在vue中导出excel表格
初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...
- PHP导入导出excel表格图片(转)
写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xml的也用过,csv的就更不用谈了.呵呵.(COM方式不讲了,这种可读的太多了,我也写过利用wp ...
随机推荐
- PHP 版本简单记录
PHP 版本简单记录 PHP 博物馆 http://museum.php.net/php5/ PHP 版本发布 https://secure.php.net/release ...
- android hander
http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决And ...
- golang 建临时文件目录以及删除
package main import ( "fmt" "os" "path/filepath" "strings" ) ...
- C++ 与C# 对应的变量互转
一.C++ 与C# 对应的变量互转的使用实例 C++的动态链接库的函数: C# 调用C++动态链接库数据类型的转换,其中在C++中数据类型为char *,在C#中对应的数据类型为intPtr. 二.常 ...
- 洛谷—— P1080 国王游戏
https://www.luogu.org/problem/show?pid=1080 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整 ...
- 浅谈Git与SVN的使用感受
作为版本号控制工作.两者的做大的差别应该在于:Git属于分布式版本号控制工具,而SVN属于集中式的版本号控制工具.分布式的优点是什么呢?举个样例来说.当你在火车上离线状态下编程工作,在某个阶段会须要先 ...
- Gmail 收信的一些规则
Gmail 收信的一些规则 用 apache+php+MDaemon 调试 mail2www 时,发往gmail的邮件失败, 提示: Our system detected an illegal at ...
- animation- 动画效果实现（代码中）
1,首先我们看一下如下的代码 import android.view.animation.LayoutAnimationController; import android.view.animatio ...
- 2. Vue基础语法
模板语法: Mustache语法: {{}} Html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok?'Yes': ...
- css基础属性
color:设置文本颜色:属性值:1.表示颜色的英文单词,例如:red.blue.green.pink.purple.cyan等:2.十六进制表示法:#ff0000: 0.1.2...9.a.b.c. ...