How to export angular UI-Grid filtered and full data into excel

Question

I am using UI-Grid for creating a grid view on my angular application. UI-Grid provides exporting the filtered and full grid data into csv or pdf format. But I need to export the data into excel.

I have used earlier Alasql to export grid data but there I was using ng-repeat to generate the grid.

Here Ui-grid directives takes care of generating the grid and by using simple methods exposed by UI-Grid directive we can export data. Just wanted to know if someone has tried exporting the data into excel.

Not sharing the code as I am using the same code as provided by UI-Grid tutorials and its working for me, just that i need export in excel file.

the easiest way I think of now is to generate csv formatted content and download it as a blob object with csv extension — neptune
The csv data should automatically open in Excel. I am using UI-Grid as well, when I export as csv and click "Open" Excel opens with the data displaying in a worksheet. What happens when you open your downloaded csv data? — Rani Radcliff
Generally when we open a csv in excel, all data comes in one column. Unless we have once imported csv into excel using Data> From text option and mentioning ',' as the delimeter. Even if we have performed this action once on any csv file, excel will apply the same delimiter and generate the data in different columns for anytime later we open a csv in excel. — techprat
@neptune: I will try this option. Currenlty I am trying to get a list of all the filtered columns and the data and then will try to write it as a blob object. — techprat
For something like this, I would normally call the backend using something like Apache POI if the backend is Java. There is a JS library out there, but no longer maintained that might be of interest: github.com/stephenliberty/excel-builder.js. — Brian

Marian Marian · Accepted Answer · 2017-03-23T10:33:21

I'm working at an app using ui-grid too, to export data to xlsx I had used alasql like this :

$scope.exportXLS = function exportXLS() {
  alasql.promise('SELECT * INTO XLSX("data.xlsx",{headers:true}) FROM ?',[$scope.gridOptions.data])
 .then(function(data){
     console.log('Data saved as XLSX');
  }).catch(function(err){
     console.log('Error:', err);
  });
};

and to export just the filterd data I get it using gridApi like this:

$scope.filteredData =$scope.gridApi.core.getVisibleRows($scope.gridApi.grid);

then map the entity field from each object in returned array to a new array , I done that using map function from underscore lib.

entities = _.map($scope.filteredData, 'entity');

and finally replace '$scope.gridOptions.data' with 'entities' in function above.

How to export angular UI-Grid filtered and full data into excel

1 Answers