title: Export an HTML table to Excel
body: <p>I have made an application which populates a table based on a JSON-dataset and I would like to store the data I filter to a Excel file (or CSV even). I have two script files, app.js and mainController.js (separating to get cleaner code), one view and the index file (and bootstrap of course). Here's the app.js:</p>
  
  <pre><code>(function () {
    "use strict";
  
    var app = angular.module('customAudience', ['ngRoute']);
  
    app.config(function ($routeProvider) {
  
      $routeProvider
        .when('/', {
          controller: 'mainController',
          templateUrl: 'views/mainPage.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  
    app.factory('Excel', function ($window) {
    var uri = 'data:application/vnd.ms-excel;base64,',
  template = '&lt;html xmlns:o="urn:schemas-microsoft-com:office:office" 
  xmlns:x="urn:schemas-microsoft-com:office:excel"xmlns="http://www.w3.org/TR/REC-
  html40"&gt;&lt;head&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;
  &lt;x:ExcelWorksheet&gt;&lt;x:Name&gt;{worksheet}&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;
  &lt;x:DisplayGridlines/&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt;
  &lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;{table}&lt;/table&gt;&lt;/body&gt;
  &lt;/html&gt;',
      base64 = function (s) {
        return $window.btoa(unescape(encodeURIComponent(s)));
      },
      format = function (s, c) {
        return s.replace(/{(\w+)}/g, function (m, p) {
          return c[p];
        })
      };
    return {
      tableToExcel: function (tableId, worksheetName) {
        var table = $(tableId),
          ctx = {
            worksheet: worksheetName,
            table: table.html()
          },
          href = uri + base64(format(template, ctx));
        return href;
      }
    };
  });
  }());
  </code></pre>
  
  <p>and here is my mainController.js:</p>
  
  <pre><code>(function () {
  
    var mainController = function ($scope, $http, Excel, $timeout) {
  
      $scope.sortType = 'PhoneNumber'; //set the default sort type
      $scope.sortReverse = false; //set the default sort order
      $scope.searchElement = ''; //set the default search/filter term
  
      $scope.items = [];
      $http.get('data/data.json').then(function (response) {
        $scope.items = response.data;
      });
  
      $scope.exportToExcel = function (tableId) { // ex: '#my-table'
        $scope.exportHref = Excel.tableToExcel(tableId, 'sheet name');
        $timeout(function () {
          location.href = $scope.fileData.exportHref;
        }, 100); // trigger download
      };
    };
  
  
    angular.module('customAudience').controller('mainController', 
  ['$scope', '$http', 'Excel', '$timeout', mainController]);
  
  }());
  </code></pre>
  
  <p>I have an id on my table that says "mytable" and this is passed into the function. </p>
  
  <p>The error I get is: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'exportHref' of undefined
        at mainController.js:19
        at angular.js:17855
        at e (angular.js:5507)
        at angular.js:5784*</p>
  </blockquote>
  
  <p>I've used <a href="https://gist.github.com/umidjons/352da2a4209691d425d4" rel="nofollow">https://gist.github.com/umidjons/352da2a4209691d425d4</a> as a guide, but it's no go.  </p>
  
  <p>Have anyone of you guys exported a HTML table to Excel in AngularJS?  </p>
  
  <p>Am I missing something?</p>
  
  <p>Note that I am using a Mac, should that make any difference?  </p>
  
  <p>Is there another, more clean, method of exporting the data - like a CSV file?</p>