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 相关文章推荐
jquery中选择块并改变属性值的方法
Jul 31 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
javascript倒计时效果实现
Nov 12 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
dojo 之基础篇
2007/03/24 Javascript
JS 继承实例分析
2008/11/04 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
浅谈node的事件机制
2017/10/09 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
出生医学证明样本
2014/01/17 职场文书
入党自我评价范文
2014/02/02 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
承诺书怎么写
2014/03/26 职场文书
新年联欢会主持词
2014/03/27 职场文书
房贷收入证明范本
2015/06/12 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
详解MySQL的内连接和外连接
2023/05/08 MySQL