Angular – ui-grid – Dynamically Changing The File Name when Exporting CSV/PDF File

September 20, 2015

no comments

Hi guys, here鈥檚 a quick tip for dynamically changing CSV or PDF file name.

Trying to make this work comes with a price, there are couple of steps you need to make before you can change the file name.
First of all you need to inject uiGridExporterService service that holds all the export methods like load data, get column headers, get export data object ,CSV content and finally you can call the downloadFile function that accepts file name as a first argument.


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);


* For changing and downloading PDF file you can use downloadPdf(fileName, docDefinition) method.

Live example:

Good luck 馃檪

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>