How to trigger export to csv for a table data from a different template in angularjs?

Question

In a html body I have 2 templates one for header and other for template. Header template has a save and download button which is supposed to export a ngTable data to a csv file using ngTable Export, which is inside a contents.html template file, but this export only works when I place an anchor tag with click handler to export in the same template.

content.html (template 1)

<a class="btn btn-default export-btn" ng-click='csv.generate($event, "report.csv")' href=''>Export</a> <!-- this works -->
<table ng-table="tableParams" show-filter="true" class="table" export-csv="csv">
        <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
            <td data-title="'Date'" align="center" filter="{ 'date': 'text' }" sortable="'date'">{{ item.date | date: 'd MMM yyyy' }}</td>
            <td data-title="'Label'" align="center" filter="{ 'label': 'text' }" sortable="'label'">{{item.label}}</td>         
            <td data-title="'Count'" align="center" filter="{ 'count': 'text' }" sortable="'count'">{{item.count}}</td>
        </tr>
</table>

header.html (template 2)

<button class="save-button" ng-click='csv.generate($event, "report.csv")'></button> <!-- does not work-->

Please help me in exporting table content to csv with a button on a separate template.

Update

Unfinished plunker link.. export not working somehow in plunker

Melisa

Answer 1

The anchor tag in your plunkr is missing ng-href="{{ csv.link() }}, which is what causes the browser to download the csv as a file.

If you must use a button instead of an anchor tag, you can simulate href with a function that calls csv.generate, and then sets location.href to the value returned by csv.link():

$scope.exportFile = function($event, fileName) {
  $scope.csv.generate($event, "report.csv");
  location.href=$scope.csv.link();
};

But, because you want the button and table to come from different templates files, they are probably being bound to different child scopes. A quick workaround for this is to tell the export directive to create the csv helper on an object that exists in the $parent scope:

<table ng-table="tableParams" export-csv="helper.csv">

Then change your controller to:

$scope.helper = {
  csv: null //will be replaced by the export directive
};

$scope.exportFile = function($event, fileName) {
  $scope.helper.csv.generate($event, "report.csv");
  location.href=$scope.helper.csv.link();
};

Here is a working demo: http://plnkr.co/edit/a05yJZC1pkwggFUxWuEM?p=preview

Purulent

maybe there is something wrong with my computer, but plunker demo doesn't work on IE – Teratism

Same here, the plunker doesn't work on Chrome. And I can't make ng-table-export work on my project as well (helper.csv stays at null value). However, I'm using ng-table-dynamic, maybe I should try it with a standard ng-table. – Urochrome

@Urochrome - i fixed broken links to the ng-table library, and the plunker is working again. library is hosted on ng-table.com now, instead of bazalt-cms.com. – Purulent

Thanks, the plunker works now, but I still can't make it work on my project. I got the following error: "TypeError: Cannot read property 'generate' of null". I thought it had something to do with ng-table-dynamic, but I have the same problem when using ng-table. – Urochrome

@Urochrome If you can reproduce your error in a plunker, post a question and I will take a look for you. – Purulent

I figured out what was wrong. I was using ng-table-export on a table inside a directive, and my link function was executed after the link function of ng-table-export, so I was basically overwriting scope.helper.csv with a null value. It works now, thanks for your help. – Urochrome

Need to send third parameter in $scope.helper.csv.generate($event, "report.csv", ngTableParams); – Melisa

it does not work on chrome as said earlier, and all entries of each row placed in first column of respective row on firefox. I searched a lot but does not find good library for it. Anyone have idea about it please help. – Reseat