自己试验了几种方法,找到一种较为全面的一种方式一键输出Excel表格,代码如下

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导出表格</title>
<script language="JavaScript" type="text/javascript">
var Tmr;
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 method(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;
Tmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableToExcel(tableid)
}
}
function Cleanup() {
window.clearInterval(Tmr);
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="method('tableExcel')">导出Excel</button>
</div> <div id="myDi">
<table id="tableExcel" width="100%" border="2" cellspacing="0" cellpadding="0"> <tr>
<td colspan="5" align="center">金庸笔下人物</td>
</tr> <tr>
<td>倚天屠龙记</td>
<td>天龙八部</td>
<td>鹿鼎记</td>
<td>神雕侠侣</td>
<td>射雕英雄传</td>
</tr> <tr>
<td>张无忌</td>
<td>乔峰</td>
<td>韦小宝</td>
<td>杨过</td>
<td>郭靖</td>
</tr> <tr>
<td>赵敏</td>
<td>虚竹</td>
<td>康熙</td>
<td>小龙女</td>
<td>黄蓉</td>
</tr> <tr>
<td>周芷若</td>
<td>段誉</td>
<td>鳌拜</td>
<td>李莫愁</td>
<td>杨康</td>
</tr> </table>
</div>
</body>
</html>

输出后显示:

显示表格:

多个浏览器下应用前端JS实现一键导出excel表的更多相关文章

  1. js实现一键导出Excel

    演示地址:https://xibushijie.github.io/static/ExportToExcel.html <!DOCTYPE html> <html lang=&quo ...

  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. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  5. js实现table导出Excel,保留table样式

    浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td sty ...

  6. python实现导出excel表(前端+后端)

    之前在做项目管理系统的时候需要实现将数据导出到excel表的功能,搜索之后发现了python的xlwt模块可以很好的实现这项功能. 首先是导入xlwt模块: import xlwtfrom io im ...

  7. 前端js实现字符串/图片/excel文件下载

    在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢?传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是可以做权限控制.数据二次处理,但缺点是需要额外发起请求.增大服务 ...

  8. js一键导出Excel

    HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...

  9. 前端实现table表格导出excel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【LeetCode】6. Z 字形变换

    题目 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L   C   ...

  2. CAD编辑器哪个好用?如何使用CAD编辑器

    说起CAD图纸很多的朋友都很熟悉,因为CAD图纸在很多领域都有广泛的应用.那CAD图纸都是使用CAD编辑器制图软件来进行绘制的,图纸的格式都是为dxf格式或者是dwg格式的.对于才接触CAD的伙伴们来 ...

  3. Python Web(四)

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Django-forms作用 前端和后端都要校验 前端校验的目的:减少后端的压力 用forms可以同时完成前端 ...

  4. [20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt

    [20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt --//前几天在做12c DCD SQLNET.EXPIRE_TIME相关测试时 ...

  5. 面向对象~~类的成员: 私有成员,公有成员, 实例方法, 类方法, 静态方法, 属性(property), isinstance ,issubclass, 元类(type)

    一 私有成员公有成员 公有成员: 在任何地方都能访问 私有成员: 只有在类的内部才能访问 类从加载时,只要遇到类中的私有成员,都会在私有成员前面加上_类名 二 实例方法 实例方法就是类的实例能够使用的 ...

  6. Resolving RMAN-06023 or RMAN-06025 (Doc ID 2038119.1)

    Resolving RMAN-06023 or RMAN-06025 (Doc ID 2038119.1) APPLIES TO: Oracle Database - Enterprise Editi ...

  7. linux 下使用 tc 模拟网络延迟和丢包-使用 linux 模拟广域网延迟 - Emulating wide area network delays with Linux

    tc 是linux 内置的命令:使用man pages 查看 我们看到,其功能为 show / manipulate traffic control settings,可对操作系统进行流量控制: ne ...

  8. echarts自定义颜色主题

    1. 进入地址:  https://echarts.baidu.com/theme-builder/ 2. 配置主题 2.1. 可以选择挑选默认方案 2.2 可以进行一些样式配置 2.3 配置背景颜色 ...

  9. Mybatis的动态sql以及分页

    mybatis动态sql If.trim.foreach <select id="selectBooksIn" resultType="com.jt.model.B ...

  10. Python机器学习笔记——One Class SVM

    前言 最近老板有一个需求,做单样本检测,也就是说只有一个类别的数据集与标签,因为在工厂设备中,控制系统的任务是判断是是否有意外情况出现,例如产品质量过低,机器产生奇怪的震动或者机器零件脱落等.相对来说 ...