Export to xls using angularjs

by

A cheap way to do this is to use Angular to generate a <table> and use FileSaver.js to output the table as an .xls file for the user to download. Excel will be able to open the HTML table as a spreadsheet.

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

Export call:

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

Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

Updated demo with checkbox functionality and question’s data.
Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/

More Related Contents:

  1. How to export an HTML table as a .xlsx file
  2. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  3. How to display length of filtered ng-repeat data
  4. What’s the recommended way to extend AngularJS controllers?
  5. Losing scope when using ng-include
  6. SyntaxError: Unexpected token o in JSON at position 1
  7. How to get the url parameters using AngularJS
  8. firebase.database is not a function
  9. angularjs to output plain text instead of html
  10. How to access object property with invalid characters
  11. Firebase TIMESTAMP to date and Time
  12. Angular – Can’t make ng-repeat orderBy work
  13. Promise.all behavior with RxJS Observables?
  14. Angular js – route-ui add default parmeter
  15. Dynamic NG-Controller Name
  16. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error for response from http://www.google.com/
  17. Angularjs: call other scope which in iframe
  18. Angular ui router unit testing (states to urls)
  19. AngularJS : Clear $watch
  20. Angular.js: set element height on page load
  21. Angular Js and google api client.js (gapi)
  22. Not a Legal JSONP API — How to get data without CALLBACK parameter
  23. How can I handle browser tab close event in Angular? Only close, not refresh
  24. How can I access the value of a promise?
  25. ng-mouseover and leave to toggle item using mouse in angularjs
  26. AngularJS ng-include inside of Google Maps InfoWindow?
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. how to fix 404 warnings for images during karma unit testing
  29. How do I pass multiple attributes into an Angular.js attribute directive?
  30. Globally defined AngularJS controllers and encapsulation

Leave a Comment