JavaScript生成.xls文件的代码


Posted in Javascript onDecember 22, 2016

贴代码,一切尽在注释中

<html>
<head> 
<meta charset="utf-8"> 
</head> 
<body> 
<input type="button" value="下载设备模板" onclick="foo;" /> 
<script type="text/javascript" language="javascript"> 
var downloadTemplate = function 
{
/** * 根据所给数据创建并返回单行 tr节点 * data (必选), tag (可选, 标识创建的节点类型) **/
var getTr=function(data,tag)
{
var tr=document.createElement("tr"); for(var i=0;i<data.length;i++)
{ 
var item=document.createElement(tag||"td"); item.innerHTML=data[i]; tr.appendChild(item);
} 
return tr;
}
; /** * 根据所给数据创建并返回 table节点 * data (可选,无则返回空的table节点), head(可选, 标识是否存在表头) **/
var getTable=function(data,head)
{
var table=document.createElement("table");
var head=head||false; //存在表头设标识为th,否则为td
var tag=head?"th":"td"; //判断是一维||二维,执行不同逻辑
if(data[0] instanceof Array)
{ 
for(var i=0;i<data.length;i++)
{
//第一行数据根据tag创建节点类型 
(i==0)?table.appendChild(getTr(data[i],tag)):table.appendChild(getTr(data[i]));
}
}
else if(data instanceof Array)
table.appendChild(getTr(data,tag));
return table; 
}
; /** * table (必选, table节点) * uri 为生成excel的头部标签 * xmlns xml命名空间 * 返回xls资源 **/
var getXls=function(table)
{
var uri = 'data:application/vnd.ms-excel;base64,';
var 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:WorksheetOptions>'+ '<x:DisplayGridlines/>'+ '</x:WorksheetOptions>'+ '</x:ExcelWorksheet>'+ '</x:ExcelWorksheets>'+ '</x:ExcelWorkbook>'+ '</xml>'+ '<![endif]-->'+ '</head>'+ '<body>'+ '<table>{table}</table>'+ '</body>'+ '</html>'; 
/** * 转码 base 64 * window.btoa能从ascii/二进制流中创建一个base64编码的字符串 * escape编码 unescape 解码字符串 * encodeURIComponent编码 DecodeURIComponent 解码字符串 **/ 
var base64 = function(s)
{ 
return window.btoa(unescape(encodeURIComponent(s))); 
};
//返回替换完具体数据的xls模板 var getXlsXml = function(template,data)
{
return template.replace(/{(\w+)}/g,data);
};
//返回资源链接
return uri+base64(getXlsXml(template, table.innerHTML));
};
/** * IE浏览器 * 使用Microsoft ActiveXObject组件生成xls ( 只兼容IE浏览器,选择允许加载组件 ) * table(必选, table节点) **/
var msDownload=function(data)
{
var xls = new ActiveXObject("Excel.Application"); 
xls.visible = true;
var xlsBook = xls.Workbooks.Add;
var xlsheet = xlsBook.Worksheets(1); 
for(var i=0;i<data.length;i++)
if(data[0] instanceof Array) 
for(var j=0;j<data[0].length;j++)
xlsheet.Cells(i+1,j+1).Value=data[i][j]; else xlsheet.Cells(1,i+1).Value=data[i]; //用完释放 xls=null; };
//参数: data(必选,一维||二维 数组), head(可选, 标识是否存在表头)
var download=function(data , head)
{ 
if(window.navigator.userAgent.indexOf("MSIE") >= 0)
msDownload(data);
else //下载(RestFul:资源下载置于超链接,地址为资源定位地址)
window.location.href =getXls(getTable(data,head));
}; 
return 
{ 
getXls:getXls, msDownload:msDownload, download:download
};
}; 
//测试数据 var od=['aid','pwd','设备名称','网关DK','区域'];
var td=[ ['aid','pwd','设备名称','网关DK','区域'], ['10086','root','松下R-399','208564165456542','2 #201'], ['10001','root','索尼SUV 09','456542895564165','2 #201'] ];
var foo=function
{ 
// new downloadTemplate.download(od,true); 
new downloadTemplate.download(td,true); 
}
; 
</script>
</body> 
</html>

测试结果:

在IE浏览器上需要允许加载ActiveX控件,之后在弹出的对话框中点击"是"

JavaScript生成.xls文件的代码

下载下来的表格如下:

JavaScript生成.xls文件的代码

chrome:

JavaScript生成.xls文件的代码

打开表格:

JavaScript生成.xls文件的代码

以上所述是小编给大家介绍的JavaScript生成.xls文件的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 #Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 #Javascript
JS闭包与延迟求值用法示例
Dec 22 #Javascript
jQuery实现两个select控件的互移操作
Dec 22 #Javascript
JS 调用微信扫一扫功能
Dec 22 #Javascript
Vue实现双向绑定的方法
Dec 22 #Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 #Javascript
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
使用python模拟高斯分布例子
2019/12/09 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
会议邀请函范文
2014/01/09 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
道路建设实施方案
2014/03/18 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
校长一岗双责责任书
2015/05/09 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python