phoebird
- 浏览: 117635 次
- 性别:
- 来自: 重庆
-
文章分类
最新评论
/**
* 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 <extjs support team>
*
*/
/**
* 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);
return '<xml version="1.0" encoding="utf-8">' +
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
'<o:DocumentProperties><o:Title>' + this.title + '</o:Title></o:DocumentProperties>' +
'<ss:ExcelWorkbook>' +
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
'</ss:ExcelWorkbook>' +
'<ss:Styles>' +
'<ss:Style ss:ID="Default">' +
'<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
'<ss:Borders>' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
'</ss:Borders>' +
'<ss:Interior />' +
'<ss:NumberFormat />' +
'<ss:Protection />' +
'</ss:Style>' +
'<ss:Style ss:ID="title">' +
'<ss:Borders />' +
'<ss:Font />' +
'<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
'<ss:NumberFormat ss:Format="@" />' +
'</ss:Style>' +
'<ss:Style ss:ID="headercell">' +
'<ss:Font ss:Bold="1" ss:Size="10" />' +
'<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
'</ss:Style>' +
'<ss:Style ss:ID="even">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evendate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'<ss:Style ss:ID="odd">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="odddate">' +
'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'</ss:Styles>' +
worksheet.xml +
'</ss:Workbook>';
},
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 += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
headerXml += '<ss:Cell ss:StyleID="headercell">' +
'<ss:Data ss:Type="String">' + cm.getColumnHeader(i) + '</ss:Data>' +
'<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
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
};
// Generate worksheet header details.
var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
'<ss:Names>' +
'<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
'</ss:Names>' +
'<ss:Table x:FullRows="1" x:FullColumns="1"' +
' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
'" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '">' +
colXml +
'<ss:Row ss:Height="38">' +
'<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
'<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
'<html:B>Generated by ExtJS</html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
'</ss:Cell>' +
'</ss:Row>' +
'<ss:Row ss:AutoFitHeight="1">' +
headerXml +
'</ss:Row>';
// 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 += '<ss:Row>';
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 += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
if (cellType[k] == 'DateTime') {
t += v.format('Y-m-d');
} else {
t += v;
}
t +='</ss:Data></ss:Cell>';
}
k++;
}
}
t += '</ss:Row>';
}
result.xml = t + '</ss:Table>' +
'<x:WorksheetOptions>' +
'<x:PageSetup>' +
'<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
'<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />' +
'<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
'</x:PageSetup>' +
'<x:FitToPage />' +
'<x:Print>' +
'<x:PrintErrors>Blank</x:PrintErrors>' +
'<x:FitWidth>1</x:FitWidth>' +
'<x:FitHeight>32767</x:FitHeight>' +
'<x:ValidPrinterInfo />' +
'<x:VerticalResolution>600</x:VerticalResolution>' +
'</x:Print>' +
'<x:Selected />' +
'<x:DoNotDisplayGridlines />' +
'<x:ProtectObjects>False</x:ProtectObjects>' +
'<x:ProtectScenarios>False</x:ProtectScenarios>' +
'</x:WorksheetOptions>' +
'</ss:Worksheet>';
return result;
}
});
exp.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
request.setAttribute("base", request.getContextPath());
response.setHeader("Content-Type", "application/force-download");
response.setHeader("Content-Type", "application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment;filename=export.xls");
out.print(request.getParameter("exportContent"));
%>
function exportExcel(){
var vExportContent =Ext.getCmp("grid").getExcelXml();
if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
if (! Ext.fly('frmDummy')) {
var frm = document.createElement('form');
frm.id = 'frmDummy';
frm.name = id;
frm.className = 'x-hidden';
document.body.appendChild(frm);
}
Ext.Ajax.request({
url: '${base}/exp.jsp',
method: 'POST',
form: Ext.fly('frmDummy'),
callback: function(o, s, r) {
// alert(r.responseText);
},
isUpload: true,
params: {exportContent: vExportContent}
})
} else {
document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent);
}
}
{
xtype:"button",text:"Excel",style:"margin-top:5px",width:80,handler:exportExcel
}
分享到：
发表评论
-
日历控件 calendar 的基本运用
2010-05-08 00:09 1154日历控件的基本运用 using System; ... -
表格对象的运用 table dropdownlist
2010-05-07 23:38 810根据dropdownlist选择行、列 确定表格 us ... -
生日 爱好 选择 dropDownlist checkBoxList 控件的基本运用
2010-05-07 23:05 1607using System; using System.Dat ... -
文本框 下拉列表框 按钮 标签 控件的简单运用 计算器实例
2010-05-07 22:27 1171<%@ Page Language="C#&q ...
相关推荐
这篇博客"Ext Grid 导出Excel"可能详细介绍了如何实现这一功能。 首先，让我们理解Ext Grid的基本工作原理。Ext Grid是Sencha Ext JS框架的一部分，它允许开发者创建可配置的表格视图，可以显示从服务器获取的数据...
"Ext grid 导出Excel"是一个常见需求，它涉及到了JavaScript库Ext JS中的数据网格组件（Ext Grid）与Microsoft Excel文件格式的交互。下面我们将深入探讨这个主题。 首先，Ext JS是一个强大的JavaScript UI框架，它...
综上所述，EXT Grid导出Excel涉及到的技术主要包括EXT Grid的数据操作、XLSX.js库的使用、自定义按钮和事件处理、文件下载触发机制以及可能的样式转换和性能优化。通过这些技术，我们可以实现EXT Grid数据的便捷导出...
本文实例讲述了asp.net+Ligerui实现grid导出Excel和Word的方法。分享给大家供大家参考，具体如下： 下面采用的导EXCEL方法，适合不翻页的grid，而且无需再读一次数据库，对于翻页的grid来说，要导全部，当然后台要再...
支持Ext3 Ext4导出excel,客户端导出表格，支持各种主流浏览器。
以上就是EXTJS Grid导出Excel的基本流程。在实际应用中，我们可能还需要考虑数据格式化、样式设置、错误处理等细节问题，以提供更好的用户体验。同时，由于EXTJS版本更新频繁，不同版本的EXTJS Grid导出功能可能会...
ExtJs 4.2版本提供了内置的`Ext.grid.feature.Exporter`插件，它允许你直接从Grid导出数据到CSV或Excel格式。以下是使用此方法的步骤： 1. 在Grid配置中，添加`Exporter`插件。你需要指定导出的类型（如'csv'或'...
这篇博客“Ext Grid导出Excel”探讨的主题是如何将Ext Grid中的数据显示在Microsoft Excel文件中，这在数据分析、报告生成以及数据共享场景中非常常见。通过这个功能，用户可以方便地将网格数据导出为标准的Excel...
总的来说，这个JSP实现的EXT Grid导出Excel例子是一个实用且常见的Web开发需求，它涉及到EXT JS的使用、AJAX通信、服务器端处理以及文件下载等多个技术点。通过这个例子，开发者可以学习到如何将前端的动态数据有效...
EXT Grid导出Excel功能的核心是利用浏览器的Blob对象和FileSaver.js库。Blob对象可以用来存储二进制数据，而FileSaver.js则提供了在用户本地保存文件的能力。首先，我们需要确保EXT Grid的数据已经加载完成并且正确...
总结一下，实现ExtJS4前台Grid导出Excel的功能主要涉及以下几个步骤： 1. 获取Grid的数据。 2. 使用SheetJS库将数据转换为Excel格式。 3. 设置工作簿的元数据，如表头和列宽。 4. 将工作簿写入Blob对象，然后通过`...
"extgrid导出excel"这个主题是关于如何将ExtJS中的数据网格（Ext Grid）的数据导出到Excel文件中，方便用户进行数据管理和分析。 首先，让我们深入了解一下Ext Grid。Ext Grid是一种用于展示和操作大量结构化数据的...
"EXTJS grid导出EXCEL文件"这个主题涉及到的主要知识点包括： 1. **EXTJS Grid组件**：EXTJS Grid是EXTJS的核心组件之一，它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源（如JSON、XML或...
标题"ext 4.2 grid导出excel 文件"指的是使用Ext JS 4.2版本的grid组件功能，将其中的数据转换成Excel格式，这样用户就可以方便地下载和处理。这个过程通常涉及到JavaScript、服务器端支持以及可能的文件处理库。 ...
本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先，我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤： 1. **获取Grid数据**：在EXTJS中，Grid的数据存储在Store对象中。要...
在EXT Grid中，导出数据...以上就是EXT Grid导出Excel的基本流程和技术要点。在"engierManger"这个项目中，你可能需要结合具体的业务逻辑和代码实现这个功能。记住，始终要关注用户体验，确保导出过程快速且用户友好。
标题提到的"Grid导出Excel"涉及到的技术主要包括AdvcolumnGrid、DBGridEh以及DBGrid，这些都是在Delphi或C++Builder等RAD（快速应用开发）环境中常用的数据可视化控件，用于显示和操作数据库中的数据。 1. ...
这个“EXTgrid导出excel”的例子正是为了解决这个问题。 首先，我们需要理解EXTgrid的基本结构。EXTgrid由一系列列定义、行数据和配置选项组成。列定义包括列头文本、数据字段、宽度等属性，而行数据则是实际存储在...
在标题中提到的"ExtJS4.0 分享Grid导出Excel插件"是一个扩展功能，允许用户将ExtJS Grid中的数据导出为Microsoft Excel格式的文件。这对于数据分析、报表生成以及数据共享非常有用。 这个插件是针对ExtJS 4.0版本...