How to export data table to csv file in angular

Question

I have a data table in my angularjs application and I want to export it to a csv file. I searched a lot on the Internet and I found this directive, but it only works when the button is next to the table. need help editing it ...

app.directive('exportToCsv',function(){ return { restrict: 'A', link: function (scope, element, attrs) { var el = element[0]; element.bind('click', function(e){ var table = e.target.nextElementSibling;//need to access to this element directly var csvString = ''; for(var i=0; i<table.rows.length;i++){ var rowData = table.rows[i].cells; for(var j=0; j<rowData.length;j++){ csvString = csvString + rowData[j].innerHTML + ","; } csvString = csvString.substring(0,csvString.length - 1); csvString = csvString + "\n"; } csvString = csvString.substring(0, csvString.length - 1); var a = $('<a/>', { style:'display:none', href:'data:application/octet-stream;base64,'+btoa(csvString), download:'emailStatistics.csv' }).appendTo('body') a[0].click() a.remove(); }); } } }); 

Answer 1

I would suggest you use the UI Grid, which is available at this link here

The code below will allow you to export to PDF or CSV

 var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.gridOptions = { columnDefs: [ { field: 'name' }, { field: 'gender', cellFilter: 'mapGender', exporterPdfAlign: 'right' }, { field: 'company', visible: false } ], exporterLinkLabel: 'get your csv here', exporterPdfDefaultStyle: {fontSize: 9}, exporterPdfTableStyle: {margin: [30, 30, 30, 30]}, exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'}, exporterPdfOrientation: 'portrait', exporterPdfPageSize: 'LETTER', exporterPdfMaxGridWidth: 500, exporterHeaderFilter: function( displayName ) { if( displayName === 'Name' ) { return 'Person Name'; } else { return displayName; } }, exporterFieldCallback: function( grid, row, col, input ) { if( col.name == 'gender' ){ switch( input ){ case 1: return 'female'; break; case 2: return 'male'; break; default: return 'unknown'; break; } } else { return input; } }, onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; } }; $http.get('/data/100.json') .success(function(data) { data.forEach( function( row, index ) { if( row.gender === 'female' ){ row.gender = 1; } else { row.gender = 2; } }); $scope.gridOptions.data = data; }); $scope.export = function(){ if ($scope.export_format == 'csv') { var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location")); $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement ); } else if ($scope.export_format == 'pdf') { $scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type ); }; }; }]) .filter('mapGender', function() { return function( input ) { switch( input ){ case 1: return 'female'; break; case 2: return 'male'; break; default: return 'unknown'; break; } }; }); 

HTML will look like

  <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div> 

Answer 2

u can do it

 var app = angular.module('tableCSV',[]); app.directive('exportToCsv',function(){ return { restrict: 'A', link: function (scope, element, attrs) { var el = element[0]; element.bind('click', function(e){ var table = e.target.previousElementSibling; var csvString = ''; for(var i=0; i<table.rows.length;i++){ var rowData = table.rows[i].cells; for(var j=0; j<rowData.length;j++){ csvString = csvString + rowData[j].innerHTML + ","; } csvString = csvString.substring(0,csvString.length - 1); csvString = csvString + "\n"; } csvString = csvString.substring(0, csvString.length - 1); var a = $('<a/>', { style:'display:none', href:'data:application/octet-stream;base64,'+btoa(csvString), download:'emailStatistics.csv' }).appendTo('body') a[0].click() a.remove(); }); } } }); app.controller('sampleController',function($scope){ $scope.message = ""; }); 

u should change nextElementSibling to previousElementSibling

Answer 3

getElementById () for accessing dynamic elements

Directive

app.directive('exportToCsv',function(){ return { restrict: 'A', link: function (scope, element, attrs) { var el = element[0]; element.bind('click', function (e) { var idName = e.target.name; var fileName = idName.split("--")[0]; var tableId = idName.split("--")[1]; var table = document.getElementById(tableId); var csvString = ''; for (var i = 0; i < table.rows.length; i++) { var rowData = table.rows[i].cells; for (var j = 0; j < rowData.length; j++) { csvString = csvString + rowData[j].innerHTML + ","; } csvString = csvString.substring(0, csvString.length - 1); csvString = csvString + "\n"; } csvString = csvString.substring(0, csvString.length - 1); var a = $('<a/>', { style: 'display:none', href: 'data:application/octet-stream;base64,' + btoa(csvString), download: fileName + '.csv' }).appendTo('body') a[0].click() a.remove(); }); } } });

HTML

<button type="button" class="btn btn-primary" name="filename--divId" export-to-csv>Export posts</button>

Add a name element to the button tag, where the first part is the file name and the second part is the identifier of the selected div.

Thank.