前端实现table表格导出excel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tb-head{
background-color: #ccc;
}
</style>
<head>
<script type="text/javascript" language="javascript">
//处理除了行内样式以外的css样式，导出excel时只能读取到行内样式，要讲非行内样式转化成行内样式
window.onload = function(){
var tbhead = document.getElementsByClassName("tb-head");
var computedStyle = document.defaultView.getComputedStyle(tbhead[0], null);
console.log(computedStyle.backgroundColor);
tbhead[0].style.backgroundColor = computedStyle.backgroundColor;
} 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 method1(tableid) {//整个表格拷贝到EXCEL中
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel
var oWB = oXL.Workbooks.Add();
//获取workbook对象
var xlsheet = oWB.Worksheets(1);
//激活当前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性 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);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程，退出完成
//window.setInterval("Cleanup();",1);
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 xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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) {
debugger;
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>
<!-- <table id="ta">
<tr>
<td>1</td><td>admin</td>
<td>23</td><td>程序员</td>
<td>天津</td><td>admin@kali.com</td>
</tr>
<tr>
<td>2</td><td>guest</td>
<td>23</td><td>测试员</td>
<td>北京</td><td>guest@kali.com</td>
</tr>
</table> -->
<table id="tb" border=4 width=250 align=center>
<caption>【表格举例】</caption>
<tr class="tb-head">
<th><br></th>
<th>列-A</th>
<th>列-B</th>
<th>列-C</th>
</tr>
<tr align=center>
<td>行-1</td>
<td>A1</td>
<td>B1</td>
<td rowspan=2>C1-C2</td>
</tr>
<tr align=center>
<td>行-2</td>
<td>A2</td>
<td>B2</td>
</tr>
<tr align=center>
<td>行-3</td>
<td>A3</td>
<td colspan=2>A3-B3</td>
</tr>
</table>
<input id="Button1" type="button" value="导出EXCEL"
onclick="method1('tb')" />
</body>
</html>
前端实现table表格导出excel的更多相关文章
- vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
- 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; ...
- Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...
- 【前端】将前台table数据导出excel表格
1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2exce ...
- 前端Table数据导出Excel使用HSSFWorkbook(Java)
一.实现原理: 1. 前端查询列表数据并渲染至table(<table>...</table>)表格 2. 表格html代码传输至后台 3. 后台把html转成Excel输出流 ...
- 纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
- Vue项目中将table组件导出Excel表格以及打印页面内容
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...
- js操作table表格导出数据到excel方法
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...
随机推荐
- C#类的访问修饰符
默认情况下,类声明为内部的,即只有当前工程中的代码才能访问它.可以用internal访问修饰符关键字显式指定,但这不是必须的,类在定义时默认为此类型的类.但是C# 方法默认访问级别: private. ...
- Node.js：get/post请求、全局对象、工具模块
一.GET/POST请求 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交.表单提交到服务器一般都使用 GET/POST 请求. 1.获取GET请求内容 由于GET请求直接被嵌入在路径 ...
- powerdesigner 16.5 破解步骤
假设你的PowerDesigner已经安装完成.(PowerDesigner下载地址:http://pan.baidu.com/s/1mgqjmpa) 1. 从网上下载PowerDesigner165 ...
- java学习笔记8--接口总结
接着前面的学习: java学习笔记7--抽象类与抽象方法 java学习笔记6--类的继承.Object类 java学习笔记5--类的方法 java学习笔记4--对象的初始化与回收 java学习笔记3- ...
- zedboard--嵌入式网络摄像机（mjpg-streamer）的移植和搭建（二十二）
在zedboard上移植和搭建嵌入式网络摄像机mjpg-streamer.具体步骤如下: 来自:http://write.blog.csdn.net/postedit/13741451 1.安装lib ...
- magento 12 配置安装教程
Magento (麦进斗) 是一套专业开源的电子商务系统.Magento设计得非常灵活,具有模块化架构体系和丰富的功能.易于与第三方应用系统无缝集成.其面向企业级应用,可处理各方面的需求,以及建设一个 ...
- shell中的字符串操作
SHELL字符串操作 bash Shell提供了多种字符串处理的命令: awk命令 expr命令 字符串长度 ${#..} expr length awk的length(s) 实例: string=& ...
- [置顶] 深入浅出Spring（四） Spring实例分析
上次的博文中 深入浅出Spring(二) IoC详解 和 深入浅出Spring(三) AOP详解中,我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们来做一个Sprin ...
- es5 - array - pop
/** * 描述:该pop()方法从数组中删除最后一个元素并返回该元素.此方法更改数组的长度. * 语法:arr.pop() * 返回:从数组删除元素,如果为undefined则返回空该,pop方法从 ...
- 将图片转成base64字符串并在JSP页面显示的Java代码
*本事例主要讲了如下几点: * 1:将图片转换为BASE64加密字符串. * 2:将图片流转换为BASE64加密字符串. * 3:将BASE64加密字符串转换为图片. * 4:在jsp文件中以引 ...