javascript生成.xls文件(兼容IE&Chrome&Firefox)
时间:2022-04-27
本文章向大家介绍javascript生成.xls文件(兼容IE&Chrome&Firefox),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
贴代码,一切尽在注释中
<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>'+
'<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> '+
'<!--[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控件,之后在弹出的对话框中点击"是"
下载下来的表格如下:
chrome:
打开表格:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树莓派基础实验20:火焰报警传感器实验
- (译)SDL编程入门(8)几何图形渲染
- Java8 dubbo 调用 Collectors.toMap代码片发生的异常(IllegalStateException: Duplicate key)
- 树莓派基础实验21:烟雾报警传感器实验
- 树莓派基础实验22:红外遥控传感器实验
- Spring的BeanUtil的copyProperties方法 慎用!!
- (译)SDL编程入门(9)视口
- (译)SDL编程入门(7)纹理加载和渲染
- 三步带你开发一个短链接生成平台
- 绕安全狗的那些事
- single-spa 基础概念
- DVWA-对Command Injection(命令注入)的简单演示与分析
- 如何探测内网存活主机
- Java ServletContext详解
- Java web Cookie详解(持久化+原理详解+共享问题+设置中文+发送多个Cookie)