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

September 19, 2015

no comments

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>

*