Extjs4 grid导出Excel

最新推荐文章于 2016-01-04 16:56:34 发布

tianlang2011

最新推荐文章于 2016-01-04 16:56:34 发布

阅读量204

点赞数

分类专栏： ext 文章标签： ext grid 导出 excel 简单

本文链接：https://blog.csdn.net/tianlang2011/article/details/84538239

版权

ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单方便可以直接使用不需要服务端代码

grid2Excel.js

/**
* Created with IntelliJ IDEA.
* User: zhuhq
* Date: 14-3-17
* Time: 下午12:26
* To change this template use File | Settings | File Templates.
*/
/**
*
* function grid2Excel(grid,filename)
* @param grid Extjs grid panel
* @param filename Excel 文件名称
*
* **/
(function(){
var Base64 = (function() {
// private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

// private method for UTF-8 encoding
function utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}

// public method for encoding
return {
//encode : (typeof btoa == 'function') ? function(input) { return btoa(input); } : function (input) {
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = utf8Encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
}
};
})();
var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };
var tableToExcel = function(table,fileName) {
var uri = 'data:application/vnd.ms-excel;base64,'
,fileName = fileName || 'excelexport'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"' +
' xmlns:x="urn:schemas-microsoft-com:office:exc el" xmlns="http://www.w3.org/TR/REC-html40"><head>' +
'<meta http-equiv="Content-Type" content="text/html; [color=orange]charset=UTF-8[/color]">'+
'</head><body>{table}</body></html>';

var ctx = {worksheet:'Worksheet', table: table};
var a = document.createElement('a');
document.body.appendChild(a);
a.hreflang = 'zh';
a.charset = 'utf8';
a.type="application/vnd.ms-excel";
a.href = uri + Base64.encode(format(template,ctx));
a.target = '_blank';
a.download = fileName + '.xls';
a.click();

};
window.grid2Excel = function(grid,fileName) {
var columns = grid.initialConfig.columns|| [],
store = grid.getStore(),
headLevel1 = [],headLevel2 = [],headLevel = 1,isGroup = false,
dataIndex =[],tableStr = '<table><thead>{thead}</thead><tbody>{tbody}</tbody></table>';

columns.forEach(function(column) {
if(!column.dataIndex) {
isGroup = true;
return false;
}

});
if(isGroup) {
headLevel = 2; //只支持二级表头
}
columns.forEach(function(column) {
if(column.dataIndex) {
column.colspan = 1;
column.rowspan = headLevel;
headLevel1.push(column);
dataIndex.push(column);
}else {
var items = column.columns ||[];
column.colspan = items.length;
column.rowspan = 1;
headLevel1.push(column);
items.forEach(function(item) {
item.colspan = 1;
item.rowspan = 1;
headLevel2.push(item);
dataIndex.push(item);
})
}
});
var headLevel1Str = '<tr>';
headLevel1.forEach(function(head) {
headLevel1Str += '<th colspan = "'+head.colspan+
'" rowspan="'+head.rowspan+'">'+head.text+'</th>';

});
headLevel1Str += '</tr>';

var headLevel2Str = '';
if(headLevel2.length > 0) {
headLevel2Str += '<tr>';
headLevel2.forEach(function(head) {
headLevel2Str += '<th colspan = "'+head.colspan+
'" rowspan="'+head.rowspan+'">'+head.text+'</th>';
});
headLevel2Str += '</tr>'
}
var theadStr = headLevel1Str + headLevel2Str,
tbodyStr = '',defRenderer = function(value) {
return value;
};

store.each(function(r) {
tbodyStr += '<tr>';
dataIndex.forEach(function(c) {
var renderere = c.renderer || defRenderer;
tbodyStr += '<td>'+renderere.call(r,r.get(c.dataIndex))+'</td>'
});
tbodyStr +='</tr>'
});
tableStr = format(tableStr,{
thead:theadStr,
tbody:tbodyStr
});

tableToExcel(tableStr,fileName);

}
})()
使用方法： 1> 在页面中引入grid2Excel.js 文件 2> 添加Button

var saveBtn = Ext.create('Ext.button.Button',{
xtype:'button',
iconCls:'excel',
type: 'excel',
text:'保存为Excel',
handler:function() {
//grid 为Extjs grid对象
//"导出文件名" 为导出的Excel文件的名称
grid2Excel(grid,"导出文件");
}
})
注意：目前只支持最多俩级表头的grid导出

如有纰漏请不吝指正，转载请[url=http://blog.51better.info/articles/2014/03/18/1395107433261.html]注明出处[/url]，谢谢！[url=http://www.51better.info/products.html]充个话费支持一下[/url] ©天朗工作室

tianlang2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4 grid导出Excel

简单方便可以直接使用不需要服务端代码grid2Excel.js/** * Created with IntelliJ IDEA. * User: zhuhq * Date: 14-3-17 * Time: 下午12:26 * To change this template use File | Settings | File Templates. */...
复制链接

扫一扫

专栏目录