/**
* 描述:导出表格对应的excel文件
* 时间:2018-03-29
* 作者:任恩远
* 调用示例:
* onclick = "tableToExcel(tableId,fileName)"
*/
/**
* 描述:导出表格对应的excel文件
* 时间:2018-03-29
* 作者:任恩远
* 调用示例:
* onclick = "tableToExcel(tableId,fileName)"
*/
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]-->'+
' <style type="text/css">'+
'.excelTable {'+
'border-collapse:collapse;'+
' border:thin solid #999; '+
'}'+
' .excelTable th {'+
' border: thin solid #999;'+
' padding:20px;'+
' text-align: center;'+
' border-top: thin solid #999;'+
' '+
' }'+
' .excelTable td{'+
' border:thin solid #999;'+
' padding:2px 5px;'+
' text-align: center;'+
' }</style>'+'</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};
var downloadLink = document.createElement("a");
downloadLink.href = uri + base64(format(template, ctx));
downloadLink.download = name+".xls";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
})()
												

用js实现导出功能将html中的table导出为excel的更多相关文章

  1. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...

  2. C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  3. vue中把table导出表格excel

    1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...

  4. html中的table导出Excel

    演示地址: http://www.jq22.com/yanshi3312 具体代码: <!DOCTYPE html> <html lang="zh-CN"> ...

  5. html中的table导出Excel (亲测有用(●'◡'●))

    演示地址: http://www.jq22.com/yanshi3312 具体代码: <!DOCTYPE html> <html lang="zh-CN"> ...

  6. HTML中的table导出为Excel文件

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

  7. 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; ...

  8. layer系列之table导出+打印功能总结

    1.关于layui导出方式,直接使用layui(版本2.4.5及以上)自带的导出方法即可: layui官网地址:https://www.layui.com/ 源码如下: <!DOCTYPE ht ...

  9. 定制Dynamics CRM标准导出功能:不能导出指定列的值

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复239或者20161203可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

随机推荐

  1. Java快速入门-03-小知识汇总篇(全)

    Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...

  2. styling the SVG images

    SVG不像canvas,SVG的所有元素都是以DOM元素存在于文档中的,我们可以像给任何普通的dom元素添加css样式一样,可以对svg的元素做styling.不过SVG元素的css样式名称和普通ht ...

  3. [翻译] KVNProgress

    KVNProgress KVNProgress is a fully customizable progress HUD that can be full screen or not. KVNProg ...

  4. 通过u盘启动盘重装系统

    前言:一直想通过u盘启动盘给旧本装个win7,但是发现网上完整的教程很少.这里分享给大家我重装的一些步骤和遇到的问题. 前期准备: 1.我们要准备一个容量在4G以上的U盘. 2.我们要将U盘中的重要数 ...

  5. UNIX crontab自动执行脚本

    crontab 是不会加载环境变量的你手动执行可以是因为登录了oracle用户加载了环境变量,你可以在脚本里添加,echo $ORACLE_HOME  echo $ORACLE_SID 等等试试,看看 ...

  6. 开闭原则(OCP)

    开闭原则具有理想主义的色彩,它是面向对象设计的终极目标.因此,针对开闭原则的实现方法,一直都有面向对象设计的大师费尽心机,研究开闭原则的实现方式.后面要提到的里氏代换原则(LSP).依赖倒转原则(DI ...

  7. [TOP10]最受欢迎的10个Metasploit模块和插件

    很多人都想知道最受欢迎的10个Metasploit模块和插件是什么(TOP10),事实上这是一个很难回答的问题,因为什么才叫"Top"?我想每个人都有每个人的看法.于是我们通过调查 ...

  8. linux性能系列--内存

    一.啥是内存呢? 回答:内存是计算机中重要的部件之一,它是与CPU进行沟通的桥梁.计算机中所有程序的运行都是在内存中进行的,因此内存的性能对计算机的影响非常大. 内存(Memory)也被称为内存储器, ...

  9. JS实现图片上传之前先预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...

  10. Objective-C与JavaScript交互的那些事

    http://www.cocoachina.com/ios/20160127/15105.html 最近公司的运营瞎搞了个活动,其活动要服务端提供数据支持,web前端在微信公众账号内作为主要的运营阵地 ...