Angular – ui-grid – Programmatically Trigger Download of CSV/PDF File

September 19, 2015

one comment

Hi guys, here’s a quick tip for programmatically triggering a download of csv or pdf file.

Code example:

HTML:

<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
<br/>
<button ng-click="downloadCSV()">Download CSV</button>
<button ng-click="downloadPDF()">Download PDF</button>
</div>

JavaScript:

Inside your controller you need to use gridApi object and call the exporter object who has the the csvExport function and pdfExport function, both function accept 2 string arguments, ‘rowTypes’ and ‘colTypes’ :

Public Api for exporter feature

$scope.downloadCSV = function(){
$scope.gridApi.exporter.csvExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);
}

scope.downloadPDF = function(){
$scope.gridApi.exporter.pdfExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);
}

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

 

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>

*

one comment

  1. Al DynakJanuary 15, 2018 ב 21:48

    You can also set a configuration to suppress columns in the export by setting this gridOption:
    exporterSuppressColumns: [‘columnName1′,’columnName2’]

    Suppose that you have a column that has a ‘delete’ button. You don’t want to print that, do you?

    Reply