Export Data-using Angular

Getting help Questions
1

I am just new to Handsontable. I feel more comfort with this tool.

Coming to the point, I’m just developing an application where I am using the handsontable because of it’s sophisticated features, but I got stuck in a place where that is the export data. My project is Angular based, i want to generate a report with the data in the grid, since handsontable is not supporting the feature to export as PDF I’m planning to export the data as json and then would like to generate the PDF with that. But unluckily, handsontable is not supporting the export as json. So finally I am in mood to export the data as string and feed that to my report, but right here I am struggling to export the data as string in angular. Can anyone please share me a working example of exporting the data to string from grid using Angular.

Or is it possible to send the data to database once the editing is finished?

Thanks,
Bala

2

Hi Bala,

you can send the data after editing via afterChange hook. Here is an example https://docs.handsontable.com/pro/3.0.0/tutorial-load-and-save.html

When it comes to exporting data as a string you can use getData method or just a predefined exportToString option that is more described at https://docs.handsontable.com/pro/3.0.0/demo-export-file.html

Let me know if that helps.

3

Thank you for your help, I just need one more clarification.

Is it possible to feed the json data to the grids. If it is possible please share me a working sample of it which is written using angular-2 or above versions.

Thanks.

4

Hi @ebalasubramanian24

I have a vanilla example http://jsfiddle.net/handsoncode/98k30bny/ but it doesn’t work any other way in Angular. You just pass JSON.parse(json) in data

5

Thank you @aleksandra_budnik I got it and I made that to work with angular.

I had tried a lot to get the data from the grid using getData() method, but it’s not resolving it. Please guide me how to use getData() in Angular.

Thanks.

6

Hi @ebalasubramanian24

you should firstly get a reference to the instance. Here https://stackblitz.com/edit/angular-5ykm8c?file=src/app/heroes/heroes.component.ts check the 51 line.

7

@aleksandra_budnik

Great! It helps me well, Thank you!

But here when I extract the data using getData() the output is coming in array of arrays format, but I wanted the output as JSON like how I am giving the input. Is that possible with Handsontable, if yes, then please guide me get the output as JSON.

Thanks…

8

Then you can call getSourceData method. It will return an array of objects with changed data.