How to export ui-grid to excel file?

Question

I use ui-grid in my project with angularjs.

In my project ui-grid exports content to excel file and it's working perfectly.

Here is ui-grid declaration:

and here ui-grid definition in javascript:

 $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
    exporterPdfFooter: function ( currentPage, pageCount ) {
      return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
    },
    exporterPdfCustomFormatter: function ( docDefinition ) {
      docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
      docDefinition.styles.footerStyle = { fontSize: 10, bold: true }; 
      return docDefinition;
    },
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,
    exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),

    data : [      
      {
           "name": "Derek",
           "company": 423638
       },
      {
           "name": "Frederik",
           "company": 513560
       }                       
   ],
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    },
    gridMenuCustomItems: [
        {
            title:'Custom Export',
            action: function ($event) {
              // this.grid.api.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true );

              var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);

              var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);

              uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);        
            },
            order:0
        } 
    ]  
  };

Here is workin PLUNKER!

But I need to export content to RTL excel file.

My question is how can I export ui-grid content to RTL excel file?

Torbert

Answer 1

You have two options here. You can use the built-in menu, which I just did successfully on a demo from UIGrid or you can add in another module, the ui.grid.exporter

From the documentation:

This module provides the ability to export data from the grid. Data can be exported in a range of formats, and all data, visible data, or selected rows can be exported, with all columns or visible columns. No UI is provided, the caller should provide their own UI/buttons as appropriate, or enable the gridMenu

I used the built-in gridMenu, which downloaded a file without an extension called undefined. I was able to open it as is from LibreOffice Calc.

If you want more control, depending on your use case, then use the exporter feature. The exporter feature allows data to be exported from the grid in csv or pdf format. The exporter can export all data, visible data or selected data.

If you want to export as Excel you need to have installed the Excel-Builder module, available through: bower install excelbuilder.

You are leaving out a lot in your question though. The user can set the RTL or LTR options in excel itself, depending on the version. To do it in code will take another library or program of some kind. Years ago I did a lot of MS Word and Excel programming using Visual Basic.

My point is, you need to specify the excel version, do you want to modify the file programmatically, are you sending the file somewhere or does the user download it and then they open it with excel? etc... I need more of the details for your use case.

Famine