简单方便 可以直接使用不需要服务端代码
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;
charset=UTF-8">'+
'<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>' +
'<x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' +
'</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>' +
'<![endif]--></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导出
如有纰漏请不吝指正，转载请
注明出处，谢谢！
充个话费支持一下 ©天朗工作室
分享到：
[b][/b]
相关推荐
本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先，我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤： 1. **获取Grid数据**：在EXTJS中，Grid的数据存储在Store对象中。要...
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
ExtJs 4.2版本提供了内置的`Ext.grid.feature.Exporter`插件，它允许你直接从Grid导出数据到CSV或Excel格式。以下是使用此方法的步骤： 1. 在Grid配置中，添加`Exporter`插件。你需要指定导出的类型（如'csv'或'...
EXTJS是一个基于JavaScript的...以上就是EXTJS Grid导出Excel文件的相关知识点，理解并掌握这些内容可以帮助你实现从EXTJS应用中导出数据到Excel的功能。在实际开发中，还需要考虑性能优化、错误处理以及兼容性问题。
总结一下，实现ExtJS4前台Grid导出Excel的功能主要涉及以下几个步骤： 1. 获取Grid的数据。 2. 使用SheetJS库将数据转换为Excel格式。 3. 设置工作簿的元数据，如表头和列宽。 4. 将工作簿写入Blob对象，然后通过`...
以下是一个简单的EXTJS4导出Excel的代码示例： ```javascript // 假设你已经有了一个名为grid的GridPanel实例，其store为store实例 var csvData = ''; store.each(function(record) { var fields = record.data; ...
这篇博客"Ext Grid 导出Excel"可能详细介绍了如何实现这一功能。 首先，让我们理解Ext Grid的基本工作原理。Ext Grid是Sencha Ext JS框架的一部分，它允许开发者创建可配置的表格视图，可以显示从服务器获取的数据...
以上就是EXTJS Grid导出Excel的基本流程。在实际应用中，我们可能还需要考虑数据格式化、样式设置、错误处理等细节问题，以提供更好的用户体验。同时，由于EXTJS版本更新频繁，不同版本的EXTJS Grid导出功能可能会...
在标题中提到的"ExtJS4.0 分享Grid导出Excel插件"是一个扩展功能，允许用户将ExtJS Grid中的数据导出为Microsoft Excel格式的文件。这对于数据分析、报表生成以及数据共享非常有用。 这个插件是针对ExtJS 4.0版本...
"extjs4导出excel"的功能就是实现了这个需求，让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤： 1. **数据收集**：首先，你需要收集要导出的...
本文主要探讨的是使用Extjs4.2框架实现纯前台导出Excel功能，并针对多次导出失败的问题进行了修复。 Extjs是一个强大的JavaScript库，专用于构建富客户端应用。版本4.2是其稳定且广泛使用的版本，提供了丰富的组件...
标题中的“Extjs 从grid中导出Excel表格”指的是使用ExtJS框架，一个流行的JavaScript库，来将数据从Grid组件导出到Microsoft Excel格式的文件。在ExtJS中，Grid是一个用于展示数据的组件，它支持各种操作，如排序、...
在导出Excel时，确保正确处理UTF-8编码，使得包含中文的文本能在Excel中正常显示，不会出现乱码。这通常需要在生成Excel文件时设置正确的字符编码，并在前后端之间传输数据时保持一致。 “EXT SDK打包在程序里面，...
总之，ExtJS6的导出Excel功能结合了分组、分组合计行和二重表头，使得数据网格的数据导出更加灵活且信息丰富。通过自定义和扩展，开发者可以创建满足特定业务场景的导出解决方案。而这个过程往往需要对ExtJS的API有...
通过以上步骤，你可以实现在ExtJS 3环境中不依赖后端服务直接将Grid数据导出为Excel的功能。不过，这种方式虽然方便，但可能无法提供复杂的Excel格式和功能，如样式、公式或图表。如果需要更高级的功能，可能需要...
这是一个简单的在extjs下的grid转化到Excel，里面代码简单易懂，在包里面还集成了复杂的js转化函数，不过本人没有用它来进行转化！ 注：在用EXTJS的导出Excel技术中，一定要注意分页的问题
总之，"Grid导出到Excel例子（源码+注释）"是一个实用的学习资源，涵盖了前端开发中数据处理和导出的关键技术。通过深入研究和实践，你不仅可以掌握Grid组件的使用，还能了解数据交换格式、Blob对象以及浏览器下载...
通过以上步骤，你应该能够实现对动态生成的ExtJS4 Grid的任意次数导出，同时支持根据Grid显示的列进行定制化导出。如果遇到动态生成的Grid在重新配置（reconfigure）后的问题，检查并更新列信息的获取方式，确保与...
标题"ext 4.2 grid导出excel 文件"指的是使用Ext JS 4.2版本的grid组件功能，将其中的数据转换成Excel格式，这样用户就可以方便地下载和处理。这个过程通常涉及到JavaScript、服务器端支持以及可能的文件处理库。 ...