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进行拖拽
Jul 20 Javascript
学习ExtJS border布局
Oct 08 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
php Smarty初体验二 获取配置信息
2011/08/08 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
小程序实现搜索框
2020/06/19 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python中lambda()的用法
2017/11/16 Python
python 获取字符串MD5值方法
2018/05/29 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
应届生学校辅导员求职信
2013/11/07 职场文书
大学校庆邀请函
2014/01/11 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
英语通知范文
2015/04/22 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
车辆挂靠协议书
2016/03/23 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Python使用永中文档转换服务
2022/05/06 Python