Extjs将GridPanel中的数据导出到Excel的方法

前些时间老大说客户要求提供将表格中的数据导出到Excel中,因为有时候他们需要将价格资料导出以便制作报价表,于是上网找了一些资料,发现网上其实有很多例子都有浏览器兼容性的问题,于是自己整合,改进之后,终于能兼容支持和浏览器了,遂在这里与大家分享、交流:

首先你需要一个将GridPanel的数据转换成标准Excel格式的JS文件,文件内容如下(貌似CSDN博客不支持上传文件给大家下载,所以唯有直接贴代码了):

// JavaScript Document /** * allows for downloading of grid data (store) directly into excel * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document, * converts to Base64, then loads everything into a data URL link. * * @author Animal * */ /** * base64 encode / decode * * @location http://www.webtoolkit.info/ * */ 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(utf8Encode(input)); } : 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; } }; })(); Ext.override(Ext.grid.GridPanel, { getExcelXml: function(includeHidden) { var worksheet = this.createWorksheet(includeHidden); var totalWidth = this.getColumnModel().getTotalWidth(includeHidden); var excelTitle = ""; if(typeof(this.title) != "undefined" && this.title != ""){ excelTitle = this.title; }else{ excelTitle = "原点商业平台导出数据"; } return '' + '' + '' + excelTitle+ '' + '' + '' + worksheet.height + '' + '' + worksheet.width + '' + 'False' + 'False' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + worksheet.xml + ''; }, createWorksheet: function(includeHidden) { // Calculate cell data types and extra class names which affect formatting var cellType = []; var cellTypeClass = []; var cm = this.getColumnModel(); var totalWidthInPixels = 0; var colXml = ''; var headerXml = ''; var visibleColumnCountReduction = 0; var colCount = cm.getColumnCount(); for (var i = 0; i < colCount; i++) { if ((cm.getDataIndex(i) != '') && (includeHidden || !cm.isHidden(i))) { var w = cm.getColumnWidth(i) totalWidthInPixels += w; if (cm.getColumnHeader(i) === ""){ cellType.push("None"); cellTypeClass.push(""); ++visibleColumnCountReduction; } else { colXml += ''; headerXml += '' + '' + cm.getColumnHeader(i) + '' + ''; var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i)); switch(fld.type) { case "int": cellType.push("Number"); cellTypeClass.push("int"); break; case "float": cellType.push("Number"); cellTypeClass.push("float"); break; case "bool": case "boolean": cellType.push("String"); cellTypeClass.push(""); break; case "date": cellType.push("DateTime"); cellTypeClass.push("date"); break; default: cellType.push("String"); cellTypeClass.push(""); break; } } } } var visibleColumnCount = cellType.length - visibleColumnCountReduction; var result = { height: 9000, width: Math.floor(totalWidthInPixels * 30) + 50 }; var excelTitle = ""; if(typeof(this.title) != "undefined" && this.title != ""){ excelTitle = this.title; }else{ excelTitle = "原点商业平台导出数据"; } // Generate worksheet header details. var t = '' + '' + '' + '' + '' + colXml + '' + '' + '' + '原点商业平台导出数据' + '' + '' + '' + headerXml + ''; // Generate the data rows from the data in the Store for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) { t += ''; var cellClass = (i & 1) ? 'odd' : 'even'; r = it[i].data; var k = 0; for (var j = 0; j < colCount; j++) { if ((cm.getDataIndex(j) != '') && (includeHidden || !cm.isHidden(j))) { var v = r[cm.getDataIndex(j)]; if (cellType[k] !== "None") { t += ''; if (cellType[k] == 'DateTime') { t += v.format('Y-m-d'); } else { t += v; } t +=''; } k++; } } t += ''; } result.xml = t + '' + '' + '' + '' + '' + '' + '' + '' + '' + 'Blank' + '1' + '32767' + '' + '600' + '' + '' + '' + 'False' + 'False' + '' + ''; return result; } });  

你可以将上述代码复制到一个独立的JS文件中,在需要用到的时候再加载就可以了。事实上这个文件是比较大的,并且导出GridPanel的功能可能很多页面都可能被需要,所以个人认为一开始就以

你可能感兴趣的:(Extjs,excel,extjs,alignment,function,string,encoding)