Export Excel files with ExtJS

Recently in a project, you need to export the Excel file on the basis of the original table, originally wanted to use the Java background to achieve this function, but later found that the original ExtJS also comes with the function of exporting Excel table, on the basis of gridpanel export,/HTTP Www.blogjava.net/rockblue1988/archive/2012/02/29/370977.html, this is what I do when referring to an article on the Internet. Specifically, the data inside the Extjsgridpanel is taken out, converted into XML, and then sent to the background, after the background response, the data output to Excel format, the specific code is as follows.

03132333435363738//using ExtJS to export an Excel file---Begin function Exportexcel (Gridpanel) {//Incoming Gridpanel instance var vexportcontent = Gridpanel.getexcelxml (); Get data if (ext.isie8| | Ext.isie6 | | Ext.isie7 | | Ext.issafari | | Ext.issafari2 | |                                EXT.ISSAFARI3) {//To determine the browser var fd = ext.get (' Frmdummy '); if (!FD) {fd = Ext.DomHelper.append (ext.ge TBody (), {tag: ' form ', met                                                Hod: ' Post ', id: ' Frmdummy ',                                                Action:exportexcelgrid, 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); }                        }         Export Excel Files---End with ExtJS 

In addition to introducing a file

/** * Allows for downloading of the grid data (store) directly into Excel * Method:extracts data of Gridpanel store, uses COL Umnmodel to construct XML Excel document, * Converts to Base64, then loads everything into a data URL link. * * @author Animal &LT;EXTJS Support team> * * * */** * Base64 encode/decode * * @location HTTP://WWW.WEBT oolkit.info/* */var Base64 = (function () {//Private property var keystr = "Abcdefghijklmnopqrstuvwxyzabcdefghijk     Lmnopqrstuvwxyz0123456789+/= ";        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 < d) {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 &) << 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 (i        Ncludehidden);        var totalWidth = This.getcolumnmodel (). Gettotalwidth (Includehidden); Return ' <xml version= ' 1.0 ' encoding= ' utf-8 ' > ' + ' <ss:workbook xmlns:ss= ' Urn:schemas-microsoft-com:offi Ce:spreadsheet "xmlns:x=" Urn:schemas-microsoft-com:office:excel "xmlns:o=" Urn:schemas-microsoft-com:office:o ffice "> ' + ' <o:DocumentProperties><o:Title> ' + this.title + ' </o:title></o:documentprop ErtieS> ' + ' <ss:ExcelWorkbook> ' + ' <ss:WindowHeight> ' + worksheet.height + ' </ss:window Height> ' + ' <ss:WindowWidth> ' + worksheet.width + ' </ss:WindowWidth> ' + ' <ss:prote Ctstructure>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:s Ize= "/> ' + ' <ss:Borders> ' + ' <ss:border ss:color=" #e4e4e4 "ss:weight=" 1 "ss:linestyl e= "continuous" ss:position= "Top"/> ' + ' <ss:border ss:color= "#e4e4e4" ss:weight= "1" ss:linestyle= "Continu ous "ss:position=" Bottom "/> ' + ' <ss:border ss:color=" #e4e4e4 "ss:weight=" 1 "ss:linestyle=" continuous "ss :P osition= "left"/> '+ ' <ss:border ss:color= ' #e4e4e4 "ss:weight=" 1 "ss:linestyle=" continuous "ss:position=" right "/> ' + ' </ss:Borders> ' + ' <ss:interior/> ' + ' <ss:numberformat/> ' + ' &lt ; ss:protection/> ' + ' </ss:Style> ' + ' <ss:style ss:id= ' title ' > ' + ' &LT;SS: Borders/> ' + ' <ss:font/> ' + ' <ss:alignment ss:wraptext= "1" ss:vertical= "Center" Ss:hor            Izontal= "Center"/> ' + ' <ss:numberformat ss:format= "@"/> ' + ' </ss:Style> ' + ' <ss:style ss:id= ' Headercell ' > ' + ' <ss:font ss:bold= ' 1 "ss:size="/> ' + ' <ss:al Ignment ss:wraptext= "1" ss:horizontal= "Center"/> ' + ' <ss:interior ss:pattern= "Solid" ss:color= "#A3C9F1" /> ' + ' </ss:Style> ' + ' <ss:style ss:id= "even" > ' + ' <ss:interior Ss:patt Ern= "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:pare            Nt= "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= ' Sol ID "ss:color=" #CCCCFF "/> ' + ' </ss:Style> ' + ' <ss:style ss:parent=" odd "ss:id=" Odddate "& gt; ' + ' <ss:numberformat ss:format= "yyyy-mm-dd"/> ' + ' </ss:Style> ' + ' <ss : Style ss:parent= "odd" ss:id= "oddint" > ' + ' <ss:numberformat ss:format= "0"/> ' + ' </ss:st Yle> ' + ' &Lt;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 F        ormatting 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.ge Tcolumnheader (i) + ' </ss:Data> ' + ' <ss:namedcell ss:name= "Print_titles"/></ss:cell&                    gt; ';                    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:namedrang E 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= ' + ' > ' + ' <ss:cell ss:styleid= ' title ' s s:mergeacross= "' + (visibleColumnCount-1) + '" > ' + ' <ss:data xmlns:html= "http://www.w3.org/TR/REC-html4 0 "ss:type=" String "> ' + ' 
After that, the code in the background is relatively simple, the following is written under Strut2.
Logger.info ("Export Excel Record");             Actioncontext context = Actioncontext.getcontext ();        HttpServletRequest request = (httpservletrequest) context                . Get (servletactioncontext.http_request);        HttpServletResponse response = (httpservletresponse) context                . Get (servletactioncontext.http_response);        PrintWriter out;        try {            out = Response.getwriter ();            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"));         } catch (IOException e) {            //TODO auto-generated catch block            e.printstacktrace ();        }         return null;     }
In this way, you can achieve the use of JS export Excel file.
http://blog.chinaunix.net/uid-26884465-id-3481113.html reference to original text
Export Excel files with ExtJS (GO)