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) ?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is a great solution, really appreciate the contribution. Do you have any simple solutions for parsing any inner objects and collections as well?
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)
the plunkr xlsx file has an issue when you try to open it.
for anyone looking for the xlsx.core dist : npmjs.com/package/js-xlsx
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}]; }
Improve this answer

2 Comments

Yes, sure. i used this module. but my goal is Exporting filtered objects directly to Excel files.
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).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.