Angular directive for exporting and downloading JSON as a CSV

var app = angular.module('testApp', ['tld.csvDownload']);

app.controller('Ctrl1', function($scope, $rootScope) {
    $scope.data = {};

    $scope.data.exportFilename = 'JetsonData.csv';
    $scope.data.displayLabel = 'Download Jetson CSV';
    $scope.data.myHeaderData = {
        id: 'User ID',
        name: 'User Name (Last, First)',
        alt: 'Nickname'
    };
    $scope.data.myInputArray = [{
        id: '0001',
        name: 'Jetson, George'
    }, {
        id: '0002',
        name: 'Jetson, Jane',
        alt: 'Jane, his wife.'
    }, {
        id: '0003',
        name: 'Jetson, Judith',
        alt: 'Daughter Judy'
    }, {
        id: '0004',
        name: 'Jetson, Elroy',
        alt: 'Boy Elroy'
    }, {
        id: 'THX1138',
        name: 'Rosie The Maid',
        alt: 'Rosie'
    }];

});

<!DOCTYPE html>
<!-- cpy of this fiddle, since my workplace seems to prevent jsfiddles from running -->
<!-- http://jsfiddle.net/mbielski/m8saa/ -->
<html ng-app="testApp">

  <head>
    <meta charset="utf-8" />
    <title>Exporting JSON as a CSV</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="csv-download.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
<div>Using an <a href="https://github.com/pcimino/csv-download" target="_blank">Angular directive for exporting JSON data as a CSV download.</a></div>


<div ng-controller="Ctrl1">
    <h2>All Attributes Set</h2>
    <csv-download
            filename="{{data.exportFilename}}"
            label="{{data.displayLabel}}"
            column-header="data.myHeaderData"
            input-array="data.myInputArray">
    </csv-download>

    <hr />
    <h2>Only Required Attribute Set</h2>
    <h3>Optional Attributes Default</h3>
    <csv-download
            input-array="data.myInputArray">
    </csv-download>
</div>
  </body>

</html>

/* Put your css in here */

!function(){"use strict";angular.module("tld.csvDownload",[]).directive("csvDownload",[]).config(["$compileProvider",function($compileProvider){$compileProvider.aHrefSanitizationWhitelist(/^\s*(data):/)}]),angular.module("tld.csvDownload").directive("csvDownload",function($log){var directive={restrict:"E",transclude:!0,template:'<a href="{{hreflink}}" download="{{filename}}">{{label}}</a>',scope:{columnHeader:"=",inputArray:"=",filename:"@filename",hreflink:"@hreflink",label:"@label"}};return directive.controller=function($scope){void 0===$scope.label&&($scope.label="Download Data");var getHeader=function(){if($scope.columnHeader)return $scope.columnHeader;$scope.columnHeader=[];for(var i in $scope.inputArray){var keys=Object.keys($scope.inputArray[i]);for(var j in keys){var key=keys[j];$scope.columnHeader[key]=key}}return $scope.columnHeader},convertArrayOfObjectsToCSV=function(){var result,ctr,keys,columnDelimiter,lineDelimiter,header=getHeader()||null;return null===header?null:(columnDelimiter=",",lineDelimiter="\n",keys=Object.keys(header),result="",keys.forEach(function(key){var dataVal=header[key];void 0===dataVal&&(dataVal=""),result+='"'+dataVal+'"'+columnDelimiter}),result+=columnDelimiter,result+=lineDelimiter,$scope.inputArray.forEach(function(item){ctr=0,keys.forEach(function(key){ctr>0&&(result+=columnDelimiter);var dataVal=item[key];void 0===dataVal&&(dataVal=""),result+='"'+dataVal+'"',ctr++}),result+=lineDelimiter}),result)},generateCSVLink=function(){void 0===$scope.filename&&($scope.filename="export.csv");var csv=convertArrayOfObjectsToCSV();null!==csv&&(csv.match(/^data:text\/csv/i)||(csv="data:text/csv;charset=utf-8,"+csv),$scope.hreflink=encodeURI(csv))};generateCSVLink()},directive})}();