Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet: tre soluzioni tipiche

Inserito da laino il Lun, 28/07/2008 - 15:10

Immagini

Immagine 1 Immagine 2 Immagine 3

di Nicola Laino - info@laino.it

L’export di dati su file .XLS è una delle funzionalità più richieste nei progetti di web application. Nel corso degli anni sono state realizzate diverse librerie per facilitarne la creazione e noi ne impiegheremo due nel secondo e nel terzo esempio applicativo. Alcune di esse richiedono la presenza del programma Excel installato sul server ed altre DLL che consentono l’interazione tra la libreria e l’object model di Excel. Il vantaggio di queste soluzioni consiste nel formato del file prodotto che è quello nativo dell’applicazione.

Excel, tuttavia, può aprire e gestire anche altri formati ed è proprio questa capacità ad essere frequentemente sfruttata nella maggior parte dei casi. In questo articolo ci occuperemo proprio delle soluzioni che non necessitano della presenza del programma. Tra i formati più usati uno è HTML ed è abbastanza facile – come è noto – mascherarlo salvando il file con l’estensione “xls”: con un doppio click su di esso Excel ne mostrerà prontamente il contenuto senza evidenziare particolari differenze rispetto al formato nativo.

Cominciamo realizzando una semplice applicazione MXML contenente la DataGrid i cui dati vogliamo esportare

  1. <?xml version=”1.0” encoding=”iso-8859-1”?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.         // Button click event handler
  7.         private function bceh():void {
  8.             var s:String = “”;
  9.             for each (var o:Object in dg.dataProvider) {
  10.                 s += “<tr><td>” + o.A + “</td><td>” + o.B + “</td><td>” + o.C +
  11. “</td></tr>”;
  12.             }
  13.             var ur:URLRequest = new URLRequest(“myApp.aspx”);
  14.             var uv:URLVariables = new URLVariables();
  15.             uv.grid = s;
  16.             ur.data = uv;
  17.             ur.method = URLRequestMethod.POST;
  18.             navigateToURL(ur, “_self”);
  19.         }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:Panel width=”250” height=”166”>
  24.  
  25.         <mx:DataGrid id=”dg” width=”100%” rowCount=”4”>
  26.             <mx:ArrayCollection>
  27.                 <mx:Object A=”1” B=”2” C=”3” />
  28.                 <mx:Object A=”4” B=”5” C=”6” />
  29.                 <mx:Object A=”7” B=”8” C=”9” />
  30.             </mx:ArrayCollection>
  31.         </mx:DataGrid>
  32.  
  33.         <mx:ControlBar>
  34.             <mx:Spacer width=”100%” />
  35.             <mx:Button label=”Esporta” click=”bceh()” />
  36.         </mx:ControlBar>
  37.  
  38.     </mx:Panel>
  39.  
  40. </mx:Application>

Al click sul pulsante “Esporta” un ciclo for raccoglie il contenuto di ogni cella della DataGrid e lo concatena in una stringa – tra comuni tag delle tabelle HTML, in modo da formare un blocco TBODY – che subito dopo verrà inviata ad una pagina .ASPX

  1. <%@ Page validateRequest=”False” %>
  2. <%@ Import Namespace=”System.Web” %>
  3. <script language=”C#” runat=”server”>
  4. private void Page_Load(object o, System.EventArgs ea) {
  5.     StringBuilder sb = new StringBuilder();
  6.     sb.Append(“<html xmlns:x=\”urn:schemas-microsoft-com:office:excel\”><head>”);
  7.     sb.Append(“<xml><x:ExcelWorksheet><x:WorksheetOptions><x:ProtectContents>False”);
  8.     sb.Append(“</x:ProtectContents></x:WorksheetOptions></x:ExcelWorksheet></xml>”);
  9.     sb.Append(“</head><body><table><tr><th>A</th><th>B</th><th>C</th></tr>”);
  10.     sb.Append(Request.Form[“grid”]);
  11.     sb.Append(“</table></body></html>”);
  12.     Response.ContentType = “application/vnd.ms-excel”;
  13.     Response.AddHeader(“content-disposition”, “attachment;filename=myGrid.xls”);
  14.     Response.Write(sb.ToString());
  15. }
  16. </script>

In questa pagina viene semplicemente completato il codice dello “spreadsheet” formato HTML. Prima di mandare in output il contenuto dello StringBuilder, però, abbiamo inserito due istruzioni chiave: il ContentType che presenta il MIME di un file Excel e l’header “content-disposition” che definisce come “attachment” ciò che viene inviato al client e ne specifica nome ed estensione.

Un ultimo rilievo sul frammento XML nell’HEAD e il relativo namespace: servono, in generale, per definire delle opzioni per il worksheet, qui per ripristinare la visualizzazione della griglia.

Compiliamo, carichiamo il file .SWF in un browser qualsiasi, facciamo click sul tasto “Esporta” e, dopo aver scelto “Salva su disco” nella finestra successiva, ancora click su tasto “OK”: dopo pochi istanti avremo il nostro “pseudo” .XLS (Immagine 1)

Passiamo alla seconda soluzione. Questa volta l’applicazione Flex contiene due DataGrid

  1. <?xml version=”1.0” encoding=”iso-8859-1”?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.         // Button click event handler
  7.         private function bceh():void {
  8.             var o:Object;
  9.             var s:String = “<grid name=\”First\”>”;
  10.             for each (o in dg1.dataProvider) {
  11.                 s += “<row><A>” + o.A + “</A><B>” + o.B + “</B><C>” + o.C + “</C></row>”;
  12.             }
  13.             s += “</grid><grid name=\”Second\”>”;
  14.             for each (o in dg2.dataProvider) {
  15.                 s += “<row><D>” + o.D + “</D><E>” + o.E + “</E><F>” + o.F + “</F></row>”;
  16.             }
  17.             var ur:URLRequest = new URLRequest(“myApp.aspx”);
  18.             var uv:URLVariables = new URLVariables();
  19.             uv.grids = s + “</grid>”;
  20.             ur.data = uv;
  21.             ur.method = URLRequestMethod.POST;
  22.             navigateToURL(ur, “_self”);
  23.         }
  24.         ]]>
  25.     </mx:Script>
  26.  
  27.     <mx:Panel width=”250” height=”262”>
  28.  
  29.         <mx:DataGrid id=”dg1” width=”100%” rowCount=”4”>
  30.             <mx:ArrayCollection>
  31.                 <mx:Object A=”1” B=”2” C=”3” />
  32.                 <mx:Object A=”4” B=”5” C=”6” />
  33.                 <mx:Object A=”7” B=”8” C=”9” />
  34.             </mx:ArrayCollection>
  35.         </mx:DataGrid>
  36.  
  37.         <mx:DataGrid id=”dg2” width=”100%” rowCount=”4”>
  38.             <mx:ArrayCollection>
  39.                 <mx:Object D=”1” E=”2” F=”3” />
  40.                 <mx:Object D=”4” E=”5” F=”6” />
  41.                 <mx:Object D=”7” E=”8” F=”9” />
  42.             </mx:ArrayCollection>
  43.         </mx:DataGrid>
  44.  
  45.         <mx:ControlBar>
  46.             <mx:Spacer width=”100%” />
  47.             <mx:Button label=”Esporta” click=”bceh()” />
  48.         </mx:ControlBar>
  49.  
  50.     </mx:Panel>
  51.  
  52. </mx:Application>

La stringa con i dati delle DataGrid inviata al file .ASPX in questa occasione contiene un markup differente: i tag HTML non servono più quindi adoperiamo una struttura utile alla logica dell’elaborazione successiva

  1. <%@ Page validateRequest=”False” %>
  2. <%@ Import Namespace=”System.Xml” %>
  3. <%@ Import Namespace=”CarlosAg.ExcelXmlWriter” %>
  4. <script language=”C#” runat=”server”>
  5. private void Page_Load(object o, System.EventArgs ea) {
  6.  
  7.     Workbook wb = new Workbook();
  8.  
  9.     WorksheetStyle wst = wb.Styles.Add(“Default”);
  10.     wst.Font.FontName = “Tahoma”;
  11.     wst.Font.Size = 10;
  12.     wst.Alignment.Horizontal = StyleHorizontalAlignment.Center;
  13.  
  14.     wst = wb.Styles.Add(“Head”);
  15.     wst.Font.FontName = “Tahoma”;
  16.     wst.Font.Bold = true;
  17.     wst.Font.Color = “#FFFFFF”;
  18.     wst.Interior.Color = “#808080”;
  19.     wst.Interior.Pattern = StyleInteriorPattern.Solid;
  20.  
  21.     Worksheet wsh;
  22.     WorksheetRow wr;
  23.  
  24.     XmlDocument xd = new XmlDocument();
  25.     xd.LoadXml(String.Concat(“<grids>”, Request.Form[“grids”], “</grids>”));
  26.  
  27.     foreach (XmlNode grid in xd.DocumentElement.ChildNodes) {
  28.         wsh = wb.Worksheets.Add(grid.Attributes.Item(0).Value);
  29.         foreach (XmlNode cell in grid.FirstChild.ChildNodes) {
  30.             wsh.Table.Columns.Add(new WorksheetColumn(60));
  31.         }
  32.         wr = wsh.Table.Rows.Add();
  33.         foreach (XmlNode cell in grid.FirstChild.ChildNodes) {
  34.             wr.Cells.Add(new WorksheetCell(cell.Name, “Head”));
  35.         }
  36.         foreach (XmlNode row in grid.ChildNodes) {
  37.             wr = wsh.Table.Rows.Add();
  38.             foreach (XmlNode cell in row.ChildNodes) {
  39.                 wr.Cells.Add(cell.FirstChild.Value);
  40.             }
  41.         }
  42.     }
  43.  
  44.     Response.ContentType = “application/vnd.ms-excel”;
  45.     Response.AddHeader(“content-disposition”, “attachment;filename=myGrids.xls”);
  46.     wb.Save(Response.OutputStream);
  47. }
  48. </script>

Il formato prodotto in questo secondo esempio è “Foglio di calcolo XML”: molto più versatile del precedente (si veda la XML Spreadsheet Reference: http://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx). La creazione del file è affidata alla libreria free ExcelXmlWriter sviluppata da Carlos Aguilar Mares e scaricabile da http://www.carlosag.net/Tools/ExcelXmlWriter/ con la relativa documentazione (ricordo che la DLL va posta in una cartella “bin” nella root del sito).

Per sommi capi: dopo aver istanziato l’oggetto principale Workbook definiamo prima lo stile predefinito per tutte le celle e poi quello che impiegheremo nelle intestazioni, quindi carichiamo il frammento XML proveniente dall’applicazione Flex in un parser (XmlDocument) e con dei cicli foreach ne attraversiamo la struttura per raccogliere i dati che adopereremo immediatamente dopo nei metodi degli oggetti contenuti nella library.

I nomi di questi oggetti sono abbastanza esplicativi ed è facile dedurre qual è la loro funzione (in ogni caso il file .CHM della guida ne documenta ogni aspetto). L’ultima istruzione salva l’esito dell’elaborazione nell’OutputStream. Compiliamo e verifichiamo l’esito dell’esportazione. (Immagine 2)

Nel terzo ed ultimo caso prendiamo in esame le funzionalità di una libreria realizzata in AS3 che consente di esportare un file .XLS binario: AS3XLS (http://code.google.com/p/as3xls/). L’autore della library, Manuel Wudka-Robles, ci mette sull’avviso circa i limiti della sua realizzazione: Currently as3xls saves spreadsheets in the format used by Excel 2 which supports only one sheet per document. Ciò nonostante il lavoro di Manuel può rivelarsi una risorsa preziosa quando abbiamo la necessità di produrre un file binario e non possiamo contare sulla presenza del programma Excel sul server (o non vogliamo acquistare una costosa libreria ad hoc per un semplice progetto che mai ci ripagherà della spesa: AS3XLS è free…). Inoltre la soluzione del giovane developer di Claremont è ancora in divenire (perlomeno questo lascia pensare il TODO): magari a breve avremo una library con nuove ed interessanti features… Nel frattempo sfruttiamo quello che c’è

  1. <?xml version=”1.0” encoding=”iso-8859-1”?>
  2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.         import com.as3xls.xls.Sheet;
  7.         import com.as3xls.xls.ExcelFile;
  8.  
  9.         // Button click event handler
  10.         private function bceh():void {
  11.             var ef:ExcelFile = new ExcelFile();
  12.             var s:Sheet = new Sheet();
  13.             s.resize(4, 3);
  14.             s.setCell(0, 0, “A”);
  15.             s.setCell(0, 1, “B”);
  16.             s.setCell(0, 2, “C”);
  17.             var r:int = 1;
  18.             var o:Object;
  19.             for each (o in dg.dataProvider) {
  20.                 s.setCell(r, 0, o.A);
  21.                 s.setCell(r, 1, o.B);
  22.                 s.setCell(r, 2, o.C);
  23.                 r++;
  24.             }
  25.             ef.sheets.addItem(s);
  26.             var ba:ByteArray = ef.saveToByteArray();
  27.             var ur:URLRequest = new URLRequest(“myApp.aspx”);
  28.             ur.data = ba;
  29.             ur.method = URLRequestMethod.POST;
  30.             navigateToURL(ur, “_self”);
  31.         }
  32.         ]]>
  33.     </mx:Script>
  34.  
  35.     <mx:Panel width=”250” height=”166”>
  36.  
  37.         <mx:DataGrid id=”dg” width=”100%” rowCount=”3”>
  38.             <mx:ArrayCollection>
  39.                 <mx:Object A=”1” B=”2” C=”3” />
  40.                 <mx:Object A=”4” B=”5” C=”6” />
  41.                 <mx:Object A=”7” B=”8” C=”9” />
  42.             </mx:ArrayCollection>
  43.         </mx:DataGrid>
  44.  
  45.         <mx:ControlBar>
  46.             <mx:Spacer width=”100%” />
  47.             <mx:Button label=”Esporta” click=”bceh()” />
  48.         </mx:ControlBar>
  49.  
  50.     </mx:Panel>
  51.  
  52. </mx:Application>

La libreria viene distribuita come archivio .SWC e, naturalmente, dovremo indicarne il percorso al momento della compilazione

mxmlc.exe -library-path+=as3xls-1.0.swc myApp.mxml

L’uso di AS3XLS è molto semplice: creiamo l’istanza dell’oggetto ExcelFile; definiamo un nuovo Sheet; ne impostiamo le dimensioni con il metodo resize (4 X 3 celle); con setCell inseriamo i nomi delle colonne nell’head e, con lo stesso metodo, i valori nel body scorrendo con il solito ciclo for il contenuto del dataProvider della DataGrid; aggiungiamo lo Sheet alla collection sheets; infine salviamo come ByteArray. Stavolta alla proprietà data di URLRequest assegniamo direttamente il ByteArray da inviare alla pagina .ASPX

  1. <%@ Import Namespace=”System.IO” %>
  2. <%@ Import Namespace=”System.Web” %>
  3. <script language=”C#” runat=”server”>
  4. private void Page_Load(object o, System.EventArgs ea) {
  5.  
  6.     byte[] b = Request.BinaryRead(Request.ContentLength);
  7.  
  8.     Response.ContentType = “application/vnd.ms-excel”;
  9.     Response.AddHeader(“content-disposition”, “attachment;filename=myGrids.xls”);
  10.     using (BinaryWriter bw = new BinaryWriter(Response.OutputStream)) {
  11.         for (int i = 0; i < b.Length; i++) {
  12.             bw.Write(b[i]);
  13.         }
  14.     }
  15.  
  16. }
  17. </script>

Il codice è banale e non necessita di commento. Compiliamo e testiamo l’applicazione. (Immagine 3)

Come di consueto potrete trovare il codice completo dei progetti sul mio sito, all’indirizzo http://www.laino.it/usermatter/xls_export.zip
______________________________________________________________

Nicola Laino
info@laino.it
Si occupa prevalentemente dello sviluppo di soluzioni web based per una nota società di telecomunicazioni. Da qualche anno si dedica alle RIA e, in particolare, al framework Flex, che sta adoperando con un certo profitto in diversi casi.