您的位置：首页 > Web前端 > JavaScript

javascript生成.xls文件(兼容IE&Chrome&Firefox)

2018-03-23 16:41 721 查看
贴代码，一切尽在注释中

<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：



打开表格：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航