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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
微信小程序 表单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
php集成动态口令认证
2016/07/21 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
2014年教研活动总结范文
2014/04/26 职场文书
户外活动总结范文
2014/04/30 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2015年安全生产责任书
2015/01/30 职场文书
门面租赁合同范文
2019/08/06 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Python极值整数的边界探讨分析
2021/09/15 Python