angularjsangular-ui-grid

Change file name when exporting to CSV in Angular UI Grid


We are using Angular UI Grid in out project. I need to put current date in file name with exported CSV data. What I'm doing now on "export" button click:

$scope.exportCSV = function () {
     $scope.gridOptions.exporterCsvFilename = getDate() + ".csv";
     $scope.gridApi.exporter.csvExport("all", "visible");
};

The problem is that filename is configured only once and doesn't change in next clicks. How can I set file name again?


Solution

  • For dynamically changing the file name you need to inject uiGridExporterService service, then you can call the downloadFile function that accepts file name as a first argument.

    Example:

    var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
    
    app.controller('MainCtrl', ['$scope','uiGridExporterConstants','uiGridExporterService', function ($scope,uiGridExporterConstants,uiGridExporterService) {
    
      $scope.exportCSV = function(){
         var exportService=uiGridExporterService;
         var grid=$scope.gridApi.grid;
         var fileName=getDate() + ".csv";
    
         exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
         var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
         var exportData = exportService.getData(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE);
         var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
             exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
      });
    
    }
    }]);
    

    Live example: http://plnkr.co/edit/O44fbDiCe6Pb5vNYRVSU?p=preview