多个浏览器下应用前端JS实现一键导出excel表
自己试验了几种方法，找到一种较为全面的一种方式一键输出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表的更多相关文章
- js实现一键导出Excel
演示地址:https://xibushijie.github.io/static/ExportToExcel.html <!DOCTYPE html> <html lang=&quo ...
- 前端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; ...
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- js实现table导出Excel，保留table样式
浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td sty ...
- python实现导出excel表（前端+后端）
之前在做项目管理系统的时候需要实现将数据导出到excel表的功能,搜索之后发现了python的xlwt模块可以很好的实现这项功能. 首先是导入xlwt模块: import xlwtfrom io im ...
- 前端js实现字符串/图片/excel文件下载
在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢?传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是可以做权限控制.数据二次处理,但缺点是需要额外发起请求.增大服务 ...
- js一键导出Excel
HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...
- 前端实现table表格导出excel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 02-java性能调优-JVM内存模型详解
JVM整体结构与内存模型之间的关系 JVM整体结构图如下: 先贴一个代码: package com.jvm.jvmCourse2; public class Math { public static ...
- Java基础专题
Java后端知识点汇总——Java基础专题 全套Java知识点汇总目录,见https://www.cnblogs.com/autism-dong/p/11831922.html 1.解释下什么是面向对 ...
- 上传图片到七牛云（客户端 js sdk）
大体思路 上一篇我们讲了如何通过服务器生成一个upToken,那前端拿到这个token后又该如何操作?在这里我给出一个相当简洁的版本. 首先我们来看一下上传的思路:调用七牛模块的upload方法,生成 ...
- 微信小程序 wxml 文件中如何让多余文本省略号显示？
废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs 取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...
- 解决html导出pdf中文乱码问题的正确姿势
简介 本文使用jspdf 1.5.3版.GitHub地址:https://github.com/MrRio/jsPDF jspdf是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非 ...
- CSS学习笔记-背景属性
一.背景尺寸属性: 1.含义: 背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式: 1.1具体像素: backgro ...
- 北航软件学院Java历届期末考题整理
文章目录 abstract static Thread finally package Exception I/O 子类和父类 关键字 标识符 垃圾收集 数据类型 环境配置 网路编程 initial ...
- YUM命令总结
1.关于YUM源 Yum 全称为 Yellow dog Updater Modified,它是一个在线的软件安装命令. 能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,并且一次安装 ...
- Java实战|Tomcat+Servlet+Sql开发简单网站，从配置环境开始
课题描述: Java实验五 Servlet (继续使用实验四中创建的students数据库和其中的scores表) 使用Tomcat作为Web服务器和Servlet容器,使用SQL Server/My ...
- JMeter基础知识系列二
1.从web服务或其他远程服务的角度来看,Jmeter很像是一款浏览器,但实际他并不是浏览器,Jmeter支持浏览器的部分操作.如:Jmeter不支持hmtl页面中包含的JavaScript脚本.处理 ...