6

Actually, I've an object in my controller, i just want to export that object as .xls or .csv file.i used a lot of approaches like this:

HTML

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript" />
<div ng-controller="myCtrl">
    <button ng-click="exportData()">Export</button>
    <br />
    <div id="exportable">
    <table width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>DoB</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.dob | date:'MM/dd/yy'}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

Javascript

function myCtrl($scope) {
    $scope.exportData = function () {
        var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
        saveAs(blob, "Report.xls");
    };

    $scope.items = [{
        name: "John Smith",
        email: "[email protected]",
        dob: "1985-10-10"
    }, {
        name: "Jane Smith",
        email: "[email protected]",
        dob: "1988-12-22"
    }, {
        name: "Jan Smith",
        email: "[email protected]",
        dob: "2010-01-02"
    }, {
        name: "Jake Smith",
        email: "[email protected]",
        dob: "2009-03-21"
    }, {
        name: "Josh Smith",
        email: "[email protected]",
        dob: "2011-12-12"
    }, {
        name: "Jessie Smith",
        email: "[email protected]",
        dob: "2004-10-12"
    }]
}

but this not works with paginated tables.is there any way to directly export objects (In this example $scope.item ) to file (xls,csv) ?

2 Answers 2

14

Yes, you can save you data with Alasql JavaScript library with XLSX.js library. Here is an example:

First: include two JavaScript libraries into your page:

  • alasql.min.js
  • xlsx.core.min.js

Second: replace exportData() function in your code with:

  $scope.exportData = function () {
      alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
  };

Third: for CSV files - simply use CSV() function:

  alasql('SELECT * INTO CSV("john.csv",{headers:true, separator:";"}) FROM ?',[$scope.items]);

You can play with this example in jsFiddle.

4
  • This is a great solution, really appreciate the contribution. Do you have any simple solutions for parsing any inner objects and collections as well? Commented Jan 8, 2016 at 15:40
  • 1
    Yes. You can try SEARCH operator, which is similar to SELECT but it traverse inside JSON object (see here: github.com/agershun/alasql/wiki/Search)
    – agershun
    Commented Jan 8, 2016 at 17:22
  • the plunkr xlsx file has an issue when you try to open it.
    – crh225
    Commented Mar 8, 2017 at 15:06
  • for anyone looking for the xlsx.core dist : npmjs.com/package/js-xlsx
    – Fergus
    Commented Oct 27, 2018 at 20:04
2

If you're satisfied with a CSV file, then the ngCsv module is the way to go. You don't load elements from the DOM but export an array directly. Here you can see a sample of ngCsv in action.

The html:

 <h2>Export {{sample}}</h2>
  <div>
      <button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>

and the js:

angular.module('csv', ['ngCsv']);

function Main($scope) {
    $scope.sample = "Sample";
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];                            
}
2
  • Yes, sure. i used this module. but my goal is Exporting filtered objects directly to Excel files.
    – bizzr3
    Commented Jun 8, 2014 at 18:43
  • 2
    Well, you stated in your question that you need to export to an .xls or .csv file. You can always apply a filter to an array (if the .csv still counts).
    – zszep
    Commented Jun 8, 2014 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.