Custom Exporter

Parent Previous Next

Since each of the built in exporters simply inherits from the base Exporter class and implements its own "customized" way of exporting data, it is quite easy to actually plugin your own exporters. Let's take a look at how this is done.


First, we need to write our own custom exporter. This is actually quite simple. In this example, we will use an exporter that writes out OO XML (Open Office Excel Markup Language). This is XML that Microsoft Excel 2007 and up can open. This allows you to write out documents that are excel compatible, and allow you to add formatting, formulas and more. It saves an xml file, but this file can be opened in excel without the dreaded “The file you are trying to open is in a different format than specified by the file extension” message. The big upside of the excel 2007 exporter is that it lets you achieve a combination of no extension message, PLUS the ability to define styles and fonts. Finally, double clicking on this file will automatically open excel on systems that have Office 2007 and above installed


/**

* Flexicious

* Copyright 2011, Flexicious LLC

*/

/**

* Exports the grid in CSV format

* @constructor

* @namespace

* @extends Exporter

*/

class Excel2007Exporter {

   constructor() {


       /**

        * Writes the header of the grid (columns) in csv format

        * @param grid

        * @return

           *

        */


       this.strTable = "";




   }


   getClassNames() {

       return ["Excel2007Exporter","Exporter"];

   }


   writeHeader(grid) {


       this.buildHeader(grid);

       return  "";


   }


   /**

    * @private

    * @param grid

    * @return

       *

    */

   buildHeader(grid) {

       let colIndex=0;


       this.strTable += "<Row ss:StyleID='s68'>";

       while(colIndex++<this.nestDepth)

           this.strTable += "<Cell><Data ss:Type='String'></Data></Cell>";


       for (const col of grid.getExportableColumns()) {

           if(!this.isIncludedInExport(col))

               continue;


           this.strTable += `<Cell><Data ss:Type='String'>${flexiciousNmsp.Exporter.getColumnHeader(col,colIndex)}</Data></Cell>`;

           colIndex++;

       }


       this.strTable += "</Row>";

   }


   uploadForEcho(body, exportOptions) {

       let strWorkbook = "<?xml version='1.0' encoding='ISO-8859-1'?><?mso-application progid='Excel.Sheet'?>" +

           "<Workbook xmlns='urn:schemas-microsoft-com:office:spreadsheet' " +

           "xmlns:ss='urn:schemas-microsoft-com:office:spreadsheet' xmlns:x='urn:schemas-microsoft-com:office:excel' " +

           "xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:html='http://www.w3.org/TR/REC-html40'>" +

           "<Styles>" +

           "<Style ss:Name='Normal' ss:ID='Default'>" +

           "<Alignment ss:Vertical='Bottom' />" +

           "<Borders />" +

           "<Font />" +

           "<Interior />" +

           "<NumberFormat />" +

           "<Protection />" +

           "</Style>" +

           "<Style ss:ID='s68'>" +

           "<Borders>" +

           "<Border ss:Position='Bottom' ss:LineStyle='Continuous' ss:Weight='2'/>" +

           "<Border ss:Position='Top' ss:LineStyle='Continuous' ss:Weight='2'/>" +

           "</Borders>" +

           "<Interior ss:Color='#4F81BD' ss:Pattern='Solid'/>" +

           "</Style>" +

           "</Styles>" +

           "<Worksheet ss:Name='Sheet1'>" +

           "<Table>";

       strWorkbook += `${this.strTable}</Table></Worksheet></Workbook>`;

       flexiciousNmsp.Exporter.prototype.uploadForEcho.apply(this,[strWorkbook, this.exportOptions]);

       this.strTable="";

   }


   /**

    * Writes an individual record in csv format

    * @param grid

    * @param record

    * @return

       *

    */

   writeRecord(grid, record) {

       let colIndex=0;

       this.strTable += "<Row>";

       if(!this.reusePreviousLevelColumns){

           while(colIndex++<this.nestDepth)

               this.strTable += "<Cell><Data ss:Type='String'></Data></Cell>";

       }


       for (const col of grid.getExportableColumns()) {

           if(!this.isIncludedInExport(col))

               continue;

           const str = col.itemToLabel(record);

           this.strTable += `<Cell><Data ss:Type='String'>${str}</Data></Cell>`;

       }


       this.strTable += "</Row>";

       return "";

   }


   /**

    * Writes the footer in CSV format

    * @param grid

    * @param dataProvider

    */

   writeFooter(grid, dataProvider) {


       return "";


   }


   /**

    * Extension of the download file.

    * @return

       *

    */

   getExtension() {

       return "xml";

   }


   /**

    * Returns the content type so MS Excel launches

    * when the exporter is run.

    * @return

       *

    */

   getContentType() {

       return "text/xml"

   }


   /**

    * Name of the exporter

    * @return

       *

    */

   getName() {

       return "Excel 2007";

   }

}


flexiciousNmsp.Excel2007Exporter = Excel2007Exporter; //add to name space

Excel2007Exporter.prototype = new flexiciousNmsp.Exporter(); //setup hierarchy

Excel2007Exporter.prototype.typeName = Excel2007Exporter.typeName = 'Excel2007Exporter';//for quick inspection



And the way you wire this up is :




                               grid.excelOptions.exporters = exporters = [new flexiciousNmsp.CsvExporter(), new flexiciousNmsp.DocExporter(),

                               new flexiciousNmsp.Excel2007Exporter()

                               ];

                               


Once you click on the excel export button, you should see:




Once you do the export using Excel 2007 exporter, you should see the below:





For a running example of this functionality, please review this blog post :


http://blog.htmltreegrid.com/post/Customizing-Excel-Output.aspx