导出ext
extjs 实现动态导出excel
-
-
我写了一个gridpanel页面，在表格的标题栏可以设置列是否显示 ，现在我想将设置过的页面excel导出， 想要获得将设置的参数在客户端获得然后传到服务器端，判断是否导出列。
现在遇到的问题是，不知道列的是否显示的参数如何获得。请各位大哥大姐帮帮忙啊<
解决方法
cm.isHidden(i)返回定义的cm中,第i列是否显示
显示,返回true,否则返回false.
然后再传到后台去吧.
-
表格的标题栏可以设置列是否显示：我觉得你这个地方可以异步提交个请求，把是否显示保存到服务器去，
或者保存到客户端cookie 在你点击导出时读取-----
难题并不是在怎么提交，而是在怎么获得列的状态（是否显示）
补充一点:
如果默认没有设置是否可见,默认返回好象是undefined.
如果是不可见,则一定是已设置,只能返回true
所以只要是非true的,都是显示的.
学习一下
index.jsp
HTML code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="scripts/ext/ext-base.js"></script> <script type="text/javascript" src="scripts/ext/ext-all.js"></script> <script type="text/javascript" src="scripts/index.js"></script> <script type="text/javascript" src="scripts/gridToExcel.js"></script> </head> <script type="text/javascript"> var path = '<%=path %>' </script> <!-- 让 grid 自动适应上级组件的高度和宽度 --> <style type="text/css"> .x-grid3-header-offset {width: auto;} </style> <!--media=print 这个属性说明可以在打印时有效--> <!--希望打印时不显示的内容设置class="Noprint"样式--> <!--希望人为设置分页的位置设置class="PageNext"样式--> <style media="print"> <!-- .Noprint{display:none;} .PageNext{page-break-after:always;} --> </style> <body> <!--IE内置打印控件IEWebBrowser--> <OBJECT id=Web height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=Web></OBJECT> <div id='gridDiv'></div> </body></html>
index.js
JScript code
Ext.QuickTips.init();Ext.state.Manager.setProvider(new Ext.state.CookieProvider());Ext.onReady(function(){ var store=new Ext.data.JsonStore({ autoLoad : true, url: path+"/servlet/getJsonServlet", fields: ['groupName','groupId','id','text','contacterNumber'] }); var sm = new Ext.grid.CheckboxSelectionModel(); var colM = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //自动行号 sm, {id:"CMgroupName",header:"所在组",width:200,sortable: true,dataIndex:"groupName"}, {id:"CMtext",header:"姓名",sortable: true,dataIndex:"text"}, {id:"CMcontacterNumber",header:"手机号码",sortable: true,dataIndex:"contacterNumber"} ]); var gridConacterInfo = new Ext.grid.GridPanel({ cm : colM, sm : sm, store : store, autoWidth:true , height : 500, collapsible: true, autoScroll:true, loadMask:true, animCollapse: false, stripeRows: true, // 让 grid 间隔两行的颜色不同 iconCls: 'icon-grid', listeners : { rowdblclick : function( grid , rowIndex , e){ // �������� var record = grid.getStore().getAt(rowIndex); } } }); var win = new Ext.Window({ width: 565, height: 500, layout:'fit', maximizable :true, items:[gridConacterInfo], bbar: [ { xtype:"button", text:"打印", pressed: true, handler:function(){ printit(); } },'','','-','','', { xtype:"button", text:"打印页面设置", pressed: true, handler:function(){ printsetup(); } },'','','-','','', { xtype:"button", text:"打印预览", pressed: true, handler:function(){ printpreview(); } },'','','-','','', { xtype:"button", text:"导入", pressed: true, handler:function(){ alert("导入的操作要从Excel 中获得数据源，在后台拼接 JSON 数据返回到 grid ，并重新加载 store。\n "+ "目前只想到这种方法，使用 JS 方法还需要以后做出来！"); } },'','','-','','', { xtype:"button", text:"导出方法 1", pressed: true, handler:function(){ var vExportContent = gridConacterInfo.getExcelXml(); if (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', action:'exportexcel.jsp', target:'_blank', name:'frmDummy', cls:'x-hidden', cn:[ { 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); } } },'','','-','','', { xtype:"button", text:"导出方法 2", pressed: true, handler:function(){ downloadViewData(gridConacterInfo); } },'','','-','','', { xtype:"button", text:"关闭", pressed: true, handler:function(){ win.close(); } } ] }) win.show(); // 导出 Ｅｘｃｅｌ 方法２ function downloadViewData(grid) { try { var xls = new ActiveXObject ("Excel.Application"); }catch(e) { alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！"); return ""; } xls.visible =true; //设置excel为可见 var xlBook = xls.Workbooks.Add; var xlSheet = xlBook.Worksheets(1); var cm = grid.getColumnModel(); var colCount = cm.getColumnCount(); var temp_obj = []; //只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示) //临时数组,存放所有当前显示列的下标 for(i=0;i <colCount;i++){ if(cm.isHidden(i) == true){ }else if(cm.getColumnId(i).indexOf("CM")!=-1){ // Header Name 带 "CM" 的表示为 grid 的列 temp_obj.push(i); } } for(i=1;i <=temp_obj.length;i++){ //显示列的列标题 xlSheet.Cells(1,i).Value = cm.getColumnHeader(temp_obj[i - 1]); } var store = grid.getStore(); var recordCount = store.getCount(); var view = grid.getView(); for(i=1;i <=recordCount;i++){ for(j=1;j <=temp_obj.length;j++){ //EXCEL数据从第二行开始,故row = i + 1; xlSheet.Cells(i + 1,j).Value = view.getCell(i - 1,temp_obj[j - 1]).innerText; } } xlSheet.Columns.AutoFit; xls.ActiveWindow.Zoom = 75 xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制 xls=null; xlBook=null; xlSheet=null; } /* * 一些 IEWEBBrower 组件的方法 * Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.ExecWB(6,1) 打印 * Web.ExecWB(6,6) 直接打印 * Web.ExecWB(7,1) 打印预览 * Web.ExecWB(8,1) 打印页面设置 * Web.ExecWB(10,1) 查看页面属性 * Web.ExecWB(17,1) 全选 * Web.ExecWB(22,1) 刷新 * Web.ExecWB(45,1) 关闭窗体无提示 * * */ function printsetup(){ Web.execwb(8,1); // 打印页面设置 } function printpreview(){ Web.execwb(7,1);// 打印页面预览 } function printit() { if (confirm('确定打印吗？')) { Web.execwb(6,1); } } });
gridToExcel.js
JScript code
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; } } } }
紧接上面 js 代码
JScript code
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>'+ this.title +'</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; }});
我也实现了，贴出来与大家共享一下
function checkColumn(){
var i = 0;
var colStr = ',';
for(i=0;i<grid.colModel.config.length;i++)
{
var cm = grid.colModel.config[i];
if(cm.dataIndex!=''&&!cm.hidden) // 判断列标识不为空,并且不是hidden
{
//alert(cm.dataIndex +' '+ cm.header); //可以获得 其index,及header 参见 grid的定义;
colStr = colStr + cm.dataIndex +",";
}
}
Ext.get('exp_column').dom.value = colStr; //exp_column,是定义在form表单里的一个hidden类型的input对象，form表单提交之前先把该值给初始化一下
}
本篇文章来源于 www.phpzy.com 原文链接：http://www.phpzy.com/php/803718.html
-
-
我写了一个gridpanel页面，在表格的标题栏可以设置列是否显示 ，现在我想将设置过的页面excel导出， 想要获得将设置的参数在客户端获得然后传到服务器端，判断是否导出列。
现在遇到的问题是，不知道列的是否显示的参数如何获得。请各位大哥大姐帮帮忙啊<
解决方法
cm.isHidden(i)返回定义的cm中,第i列是否显示
显示,返回true,否则返回false.
然后再传到后台去吧.
-
表格的标题栏可以设置列是否显示：我觉得你这个地方可以异步提交个请求，把是否显示保存到服务器去，
或者保存到客户端cookie 在你点击导出时读取-----
难题并不是在怎么提交，而是在怎么获得列的状态（是否显示）
补充一点:
如果默认没有设置是否可见,默认返回好象是undefined.
如果是不可见,则一定是已设置,只能返回true
所以只要是非true的,都是显示的.
学习一下
index.jsp
HTML code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="scripts/ext/ext-base.js"></script> <script type="text/javascript" src="scripts/ext/ext-all.js"></script> <script type="text/javascript" src="scripts/index.js"></script> <script type="text/javascript" src="scripts/gridToExcel.js"></script> </head> <script type="text/javascript"> var path = '<%=path %>' </script> <!-- 让 grid 自动适应上级组件的高度和宽度 --> <style type="text/css"> .x-grid3-header-offset {width: auto;} </style> <!--media=print 这个属性说明可以在打印时有效--> <!--希望打印时不显示的内容设置class="Noprint"样式--> <!--希望人为设置分页的位置设置class="PageNext"样式--> <style media="print"> <!-- .Noprint{display:none;} .PageNext{page-break-after:always;} --> </style> <body> <!--IE内置打印控件IEWebBrowser--> <OBJECT id=Web height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=Web></OBJECT> <div id='gridDiv'></div> </body></html>
index.js
JScript code
Ext.QuickTips.init();Ext.state.Manager.setProvider(new Ext.state.CookieProvider());Ext.onReady(function(){ var store=new Ext.data.JsonStore({ autoLoad : true, url: path+"/servlet/getJsonServlet", fields: ['groupName','groupId','id','text','contacterNumber'] }); var sm = new Ext.grid.CheckboxSelectionModel(); var colM = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //自动行号 sm, {id:"CMgroupName",header:"所在组",width:200,sortable: true,dataIndex:"groupName"}, {id:"CMtext",header:"姓名",sortable: true,dataIndex:"text"}, {id:"CMcontacterNumber",header:"手机号码",sortable: true,dataIndex:"contacterNumber"} ]); var gridConacterInfo = new Ext.grid.GridPanel({ cm : colM, sm : sm, store : store, autoWidth:true , height : 500, collapsible: true, autoScroll:true, loadMask:true, animCollapse: false, stripeRows: true, // 让 grid 间隔两行的颜色不同 iconCls: 'icon-grid', listeners : { rowdblclick : function( grid , rowIndex , e){ // �������� var record = grid.getStore().getAt(rowIndex); } } }); var win = new Ext.Window({ width: 565, height: 500, layout:'fit', maximizable :true, items:[gridConacterInfo], bbar: [ { xtype:"button", text:"打印", pressed: true, handler:function(){ printit(); } },'','','-','','', { xtype:"button", text:"打印页面设置", pressed: true, handler:function(){ printsetup(); } },'','','-','','', { xtype:"button", text:"打印预览", pressed: true, handler:function(){ printpreview(); } },'','','-','','', { xtype:"button", text:"导入", pressed: true, handler:function(){ alert("导入的操作要从Excel 中获得数据源，在后台拼接 JSON 数据返回到 grid ，并重新加载 store。\n "+ "目前只想到这种方法，使用 JS 方法还需要以后做出来！"); } },'','','-','','', { xtype:"button", text:"导出方法 1", pressed: true, handler:function(){ var vExportContent = gridConacterInfo.getExcelXml(); if (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', action:'exportexcel.jsp', target:'_blank', name:'frmDummy', cls:'x-hidden', cn:[ { 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); } } },'','','-','','', { xtype:"button", text:"导出方法 2", pressed: true, handler:function(){ downloadViewData(gridConacterInfo); } },'','','-','','', { xtype:"button", text:"关闭", pressed: true, handler:function(){ win.close(); } } ] }) win.show(); // 导出 Ｅｘｃｅｌ 方法２ function downloadViewData(grid) { try { var xls = new ActiveXObject ("Excel.Application"); }catch(e) { alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！"); return ""; } xls.visible =true; //设置excel为可见 var xlBook = xls.Workbooks.Add; var xlSheet = xlBook.Worksheets(1); var cm = grid.getColumnModel(); var colCount = cm.getColumnCount(); var temp_obj = []; //只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示) //临时数组,存放所有当前显示列的下标 for(i=0;i <colCount;i++){ if(cm.isHidden(i) == true){ }else if(cm.getColumnId(i).indexOf("CM")!=-1){ // Header Name 带 "CM" 的表示为 grid 的列 temp_obj.push(i); } } for(i=1;i <=temp_obj.length;i++){ //显示列的列标题 xlSheet.Cells(1,i).Value = cm.getColumnHeader(temp_obj[i - 1]); } var store = grid.getStore(); var recordCount = store.getCount(); var view = grid.getView(); for(i=1;i <=recordCount;i++){ for(j=1;j <=temp_obj.length;j++){ //EXCEL数据从第二行开始,故row = i + 1; xlSheet.Cells(i + 1,j).Value = view.getCell(i - 1,temp_obj[j - 1]).innerText; } } xlSheet.Columns.AutoFit; xls.ActiveWindow.Zoom = 75 xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制 xls=null; xlBook=null; xlSheet=null; } /* * 一些 IEWEBBrower 组件的方法 * Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.ExecWB(6,1) 打印 * Web.ExecWB(6,6) 直接打印 * Web.ExecWB(7,1) 打印预览 * Web.ExecWB(8,1) 打印页面设置 * Web.ExecWB(10,1) 查看页面属性 * Web.ExecWB(17,1) 全选 * Web.ExecWB(22,1) 刷新 * Web.ExecWB(45,1) 关闭窗体无提示 * * */ function printsetup(){ Web.execwb(8,1); // 打印页面设置 } function printpreview(){ Web.execwb(7,1);// 打印页面预览 } function printit() { if (confirm('确定打印吗？')) { Web.execwb(6,1); } } });
gridToExcel.js
JScript code
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; } } } }
紧接上面 js 代码
JScript code
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>'+ this.title +'</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; }});
我也实现了，贴出来与大家共享一下
function checkColumn(){
var i = 0;
var colStr = ',';
for(i=0;i<grid.colModel.config.length;i++)
{
var cm = grid.colModel.config[i];
if(cm.dataIndex!=''&&!cm.hidden) // 判断列标识不为空,并且不是hidden
{
//alert(cm.dataIndex +' '+ cm.header); //可以获得 其index,及header 参见 grid的定义;
colStr = colStr + cm.dataIndex +",";
}
}
Ext.get('exp_column').dom.value = colStr; //exp_column,是定义在form表单里的一个hidden类型的input对象，form表单提交之前先把该值给初始化一下
}
本篇文章来源于 www.phpzy.com 原文链接：http://www.phpzy.com/php/803718.html