Custom Exporter
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
*/
(function(window)
{
"use strict";
var Excel2007Exporter, uiUtil = flexiciousNmsp.UIUtils, flxConstants = flexiciousNmsp.Constants;
/**
* Exports the grid in CSV format
* @constructor
* @namespace
* @extends Exporter
*/
Excel2007Exporter=function(){
/**
* Writes the header of the grid (columns) in csv format
* @param grid
* @return
*
*/
this.strTable = "";
};
flexiciousNmsp.Excel2007Exporter = Excel2007Exporter; //add to name space
Excel2007Exporter.prototype = new flexiciousNmsp.Exporter(); //setup hierarchy
Excel2007Exporter.prototype.typeName = Excel2007Exporter.typeName = 'Excel2007Exporter';//for quick inspection
Excel2007Exporter.prototype.getClassNames=function(){
return ["Excel2007Exporter","Exporter"];
};
Excel2007Exporter.prototype.writeHeader=function(grid){
this.buildHeader(grid);
return "";
};
/**
* @private
* @param grid
* @return
*
*/
Excel2007Exporter.prototype.buildHeader=function (grid){
var colIndex=0;
this.strTable += "<Row ss:StyleID='s68'>";
while(colIndex++<this.nestDepth)
this.strTable += "<Cell><Data ss:Type='String'></Data></Cell>";
for(var i=0;i<grid.getExportableColumns().length;i++){
var col=grid.getExportableColumns()[i];
if(!this.isIncludedInExport(col))
continue;
this.strTable += "<Cell><Data ss:Type='String'>" +
flexiciousNmsp.Exporter.getColumnHeader(col,colIndex) + "</Data></Cell>";
colIndex++;
}
this.strTable += "</Row>";
};
Excel2007Exporter.prototype.uploadForEcho=function(body, exportOptions){
var 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
*
*/
Excel2007Exporter.prototype.writeRecord=function(grid, record){
var colIndex=0;
this.strTable += "<Row>";
if(!this.reusePreviousLevelColumns){
while(colIndex++<this.nestDepth)
this.strTable += "<Cell><Data ss:Type='String'></Data></Cell>";
}
for(var i=0;i<grid.getExportableColumns().length;i++){
var col=grid.getExportableColumns()[i];
if(!this.isIncludedInExport(col))
continue;
var 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
*/
Excel2007Exporter.prototype.writeFooter=function(grid, dataProvider){
return "";
};
/**
* Extension of the download file.
* @return
*
*/
Excel2007Exporter.prototype.getExtension = function() {
return "xml";
};
/**
* Returns the content type so MS Excel launches
* when the exporter is run.
* @return
*
*/
Excel2007Exporter.prototype.getContentType = function() {
return "text/xml"
};
/**
* Name of the exporter
* @return
*
*/
Excel2007Exporter.prototype.getName = function() {
return "Excel 2007";
};
}(window));
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