Export table in HTML page to Excel using ng-csv

Question

I made a simple project using Yeoman Angular generator. I made a table from this API.

Here's my main.html:

<div ng-controller="MainCtrl">
<button type="button" ng-csv="getArray" csv-header="getHeader()" filename="test.csv">Export</button>
</div>

<div class="row">
        <div class="col-xs-12 table">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>ID Pel.</th>
                        <th>Cust ID</th>
                        <th>Meter SN</th>
                        <th>Readingpoint</th>
                        <th>Last Dial</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="pop in tableData">
                        <td>{{pop.No}}</td>
                        <td>{{pop.idPel}}</td>
                        <td>{{pop.custID}}</td>
                        <td>{{pop.uSN}}</td>
                        <td><a ui-sref="app.bill_detail3">{{pop.metername}}</a></td>
                        <td>17-02-2015 | 16.00</td>
                        <td><span class="label label-success">Online</span></td>
                    </tr>

                </tbody>
            </table>
        </div>
        <!-- /.col -->
    </div>

Here's my services/main.js

angular.module('simpleApp')
  .service('main', function ($http, $q, ApiEndpoint) {
    // AngularJS will instantiate a singleton by calling "new" on this function
  var service = {};

        service.getPopList = getPopList;

        function getPopList(){
            var q = $q.defer();

            var req = {
                method: 'GET',
                url: ApiEndpoint.url + 'getpop/list'
            }

            $http(req)
                .success(function(data) {
                    q.resolve(data);
                })
                .error(function(error){
                    q.reject(error);
                })

            return q.promise;
        };

        return service;
  });

Here's my controller/main.js:

angular.module('simpleApp')
  .controller('MainCtrl', function ($scope, main) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.getHeader = function () {return ["No.", "ID Pel.", "Cust ID", "Meter SN", "Readingpoint", "Last Dial", "Status"]};


    $scope.tableData = [];
    $scope.meterCount = 0;

    main.getPopList().then(function(data){
        var no = 0;
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data[i].d.readpoint.length; j++) {
                $scope.tableData.push({
                    'No': ++no,
                    '_id': data[i]._id,
                    'siteID': data[i].d.siteID,
                    'uSN': data[i].d.readpoint[j].uSN,
                    'idPel': data[i].d.readpoint[j].idPel,
                    'custID': data[i].d.readpoint[j].custID,
                    'metername': data[i].d.readpoint[j].metername
                });
            }
        }

      $scope.getArray = [{a:'No', b:'_id', c:'siteID', d:'uSN', e:'idPel', f:'custID', g:'metername'},
      {a:'No', b:'_id', c:'siteID', d:'uSN', e:'idPel', f:'custID', g:'metername'}];


        $scope.meterCount = no;
    }, function(){ });

  });

The web looks like this:

I want to export all the table contents (header and content itself) to Excel (.xls).

How can I do that?

Oh, I am using ng-csv right now. and the results now is like this:

Answer 1

change your button ng-csv attribute value to tableData

<button type="button" ng-csv="tableData" csv-header="getHeader()" filename="test.csv">Export</button>