ExtJs导出Excel表格
源文件引入工程：girdToExcel.js
/**
* 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>ESB_监控主表</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;
}
});
第一步：确定你的gird能在IE正常打开
第二步：引入此代码（自己更改)
<%@ page contentType="text/html;charset=GBK" %> <%@ include file="/include/includeHead.jsp" %>
<span style="font-family: 'Arial Black';"><script language="javascript" src="<%=_contextPath_%>/resource/ext/girdToExcel.js</span><span style="font-family: 'Arial Black';">"></script></span>
<script language="javascript" src="<%=_contextPath_%>/jsp/monitor/neweabusmonitorfordata.js"></script> </head> <body> </body> </html>
）
第三步：添加 导出Excel按钮：
在你的gird代码内添加一下代码：
tbar : [{
text : "导出EXCEL",
iconCls : 'page_excelIcon',
handler : function(title,fileName) {
var vExportContent = grid.getExcelXml(title); // 获取数据（一般这里会报错,那就看你源文件引入的对吗？）
if (Ext.isIE8 || Ext.isIE6 || Ext.isIE7 || Ext.isSafari
|| Ext.isSafari2 || Ext.isSafari3) { // 判断浏览器
var fd = Ext.get('frmDummy');
if (!fd) {
fd = Ext.DomHelper.append(Ext.getBody(), {
tag : 'form',
method : 'post',
id : 'frmDummy',
<strong>action : 'newExportExcel.jsp',</strong>
target : '_blank',
name : 'frmDummy',
cls : 'x-hidden',
cn : [
{tag:'input',name:'fileName',id:'fileName',type:'hidden'},
{tag:'input',name : 'exportContent',id : 'exportContent',type : 'hidden'}
]
}, true);
}
fd.child('#exportContent').set({
value : vExportContent
});
fd.dom.submit();
} else {
document.location = 'data:application/vnd.ms-excel;base64,'
+ Base64.encode(vExportContent);<pre name="code" class="javascript"> //（一般这里会报错，那就看你源文件引入的对吗？）Bat64 not isfounction
}}}],
第四步，添加一个jsp引入文件（没有此文件 Excel 不能按照此方式导出）newExportExcel.jsp(路径是在同一文件内)
<strong></strong><pre name="code" class="html"><%@ page language="java" pageEncoding="UTF-8"%>
<%
String content = request.getParameter("exportContent");
String fileName = request.getParameter("fileName");
content = new String(content.getBytes("ISO8859_1"));
fileName="ESB_MONITORLIST";
response.setHeader("Content-Type","application/force-download");
response.setHeader("Content-Type","application/vnd.ms-excel");
response.setHeader("Content-Disposition","attachment;filename="+fileName+".xls");
out.print(content);
%>
网上流传的很多版本在ie7、ie8中导出中文是乱码ff可以不乱码，需要在jsp文件中加上<%@ page language="java" pageEncoding="UTF-8"%>头，获取的内容需要进行转码：content = new String(content.getBytes("ISO8859_1")); 这样在ie7、ie8、Firefox中都可以导出中文。
只要按照我说的一步一步来这时候就应该能导出了 ，乱码问题在上文我已经解决。
我在网上还找到了一个一个文件 提供大家参考
<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import= "java.net.URLEncoder "%>
<%
request.setCharacterEncoding("GBK");
String content = request.getParameter("exportContent");
String fileName = request.getParameter("fileName");
String os = System.getProperty("os.name");
if(os.contains("Windows")){
content = new String(content.getBytes("ISO8859_1"));//WINDOWS 下需要进行转码，AIX下不需要转码
}else if(os.contains("AIX")){
fileName = java.net.URLEncoder.encode(fileName,"UTF-8");//WINDOWS 下不需要对文件名进行转码，AIX下需要转码
}
response.setHeader("Content-Type","application/force-download");
response.setHeader("Content-Type","application/vnd.ms-excel");
response.setHeader("Content-Disposition","attachment;filename=" + fileName + ".xls");
out.print(content);
%>
关于JSP形式导出Excel 就这么多了.....
相关推荐
"extjs4导出excel"的功能就是实现了这个需求，让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤： 1. **数据收集**：首先，你需要收集要导出的...
"ExtJS导出Excel"的功能则是允许用户将`grid`中的数据方便地导出为Excel格式，这样可以方便数据的保存、分析和共享。 在实现页面级的ExtJS `grid`数据导出到Excel时，通常会涉及到以下几个关键知识点： 1. **ExtJS...
在本文中，我们将深入探讨如何使用ExtJS来模拟Excel表格，以及实现Excel的各种功能。 首先，ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据，并提供了诸如排序、过滤、分页等...
标题中的“Extjs 从grid中导出Excel表格”指的是使用ExtJS框架，一个流行的JavaScript库，来将数据从Grid组件导出到Microsoft Excel格式的文件。在ExtJS中，Grid是一个用于展示数据的组件，它支持各种操作，如排序、...
在EXTJS4中，导出表格数据到Excel通常涉及以下几个关键步骤： 1. **准备数据**：首先，你需要确保表格中的数据已经加载完毕。EXTJS4的GridPanel可以通过Store来管理数据，你需要确保Store已经填充了要导出的数据。 ...
总之，ExtJS6的导出Excel功能结合了分组、分组合计行和二重表头，使得数据网格的数据导出更加灵活且信息丰富。通过自定义和扩展，开发者可以创建满足特定业务场景的导出解决方案。而这个过程往往需要对ExtJS的API有...
在Extjs4.2中导出Excel，主要是通过创建一个HTML表格，然后利用浏览器的`window.navigator.msSaveBlob`方法（适用于IE及Edge）或`a`标签的`download`属性（适用于其他现代浏览器）来实现。这种方法无需后端服务器...
首先，要实现Excel导出，你需要在项目中引入Apache POI的依赖。这通常通过Maven或Gradle等构建工具完成，确保在项目中可以访问到所需的POI类库。 1. **获取数据**： 在示例代码中，`suggestionService....
本篇文章将深入探讨如何使用ExtJS实现导出表格数据到Excel的功能。 首先，我们要理解ExtJS中的Grid组件，它是展示大量结构化数据的主要方式。Grid可以绑定到各种数据源，并提供了排序、筛选、分页等功能。要实现...
标题中的“extjs 数据导出到Excel,数据列自选”指的是使用EXTJS框架实现一个功能，让用户能够从Web应用中选择需要的数据列，并将这些选定的数据导出为Excel文件。EXTJS是一个强大的JavaScript库，专门用于构建富...
在EXTJS Grid中导出数据到Excel是一种常见的需求，它允许用户方便地处理和分析大量数据。EXTJS是一个强大的JavaScript库，专门用于构建富客户端Web应用程序，而Grid组件是其核心部分，用于展示和管理表格数据。在...
### ExtJS实现Excel导出：深入解析与实践 在当今高度数字化的工作环境中，数据的管理和呈现方式至关重要。其中，Excel作为数据处理和分析的重要工具，其导出功能在各种应用场景中显得尤为关键。ExtJS，作为一种强大...
EXTJS是一个基于JavaScript的...以上就是EXTJS Grid导出Excel文件的相关知识点，理解并掌握这些内容可以帮助你实现从EXTJS应用中导出数据到Excel的功能。在实际开发中，还需要考虑性能优化、错误处理以及兼容性问题。
在本篇文章中，我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先，我们需要了解`Ext.grid.Panel`，这是ExtJS中的核心组件之一，用于创建数据网格。它能够动态加载数据，提供排序、过滤、分页...
在EXTJS中实现Excel导出，通常涉及到以下几个关键知识点： 1. **EXTJS Grid组件**：EXTJS的Grid组件是数据展示的核心，它允许你创建可定制的、功能丰富的表格。Grid组件支持数据分页、排序、过滤和编辑等功能，能够...
当需要将Grid中的数据导出到Excel时，可以采用两种方法，这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一：使用XLSX.js库** XLSX.js是一个JavaScript库，能够方便地读取和写入Excel文件。在ExtJs中，你...
要实现Excel导出，我们需要关注以下几个关键步骤： 1. **数据收集**：首先，你需要从Grid的Store中获取所有显示的数据。这通常涉及到遍历Store中的所有记录，并将它们的属性值提取出来。你可以使用`store.each()`...
本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先，我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤： 1. **获取Grid数据**：在EXTJS中，Grid的数据存储在Store对象中。要...
Struts1.2 + ExtJS + 导出Excel项目是一个基于Web的应用开发框架组合，用于构建企业级的Java应用程序。这个项目的重点在于整合Struts1.2（一个经典的MVC框架）与ExtJS（一个富客户端JavaScript库）来提供用户友好的...
该js代码是在extjs中用到的工具类，将数据以excel的表现形式导出来