AngularJS Excel Export

Exports JSON data into xls format (not csv)

by sunil puvvada

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.1/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.1/xlsx.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-controller="appCtrl">
  <div excel-export export-data="exportData" file-name="{{fileName}}"></div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('appCtrl', ['$scope', function($scope) {
	$scope.jsonToExport = [
  	{
    	"col1data": "1",
      "col2data": "Fight Club",
      "col3data": "Brad Pitt"
    },
  	{
    	"col1data": "2",
      "col2data": "Matrix (Series)",
      "col3data": "Keanu Reeves"
    },
  	{
    	"col1data": "3",
      "col2data": "V for Vendetta",
      "col3data": "Hugo Weaving"
    }
  ];
  
	// Prepare Excel data:
	$scope.fileName = "report";
	$scope.exportData = [];
  // Headers:
	$scope.exportData.push(["#", "Movie", "Actor"]);
  // Data:
	angular.forEach($scope.jsonToExport, function(value, key) {
    $scope.exportData.push([value.col1data, value.col2data, value.col3data]);
	});
}]);


/* Directive */
app
  .directive('excelExport',
    function () {
      return {
        restrict: 'A',
        scope: {
        	fileName: "@",
            data: "&exportData"
        },
        replace: true,
        template: '<button class="btn btn-primary btn-ef btn-ef-3 btn-ef-3c mb-10" ng-click="download()">Export to Excel <i class="fa fa-download"></i></button>',
        link: function (scope, element) {
        	
        	scope.download = function() {

        		function datenum(v, date1904) {
            		if(date1904) v+=1462;
            		var epoch = Date.parse(v);
            		return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
            	};
            	
            	function getSheet(data, opts) {
            		var ws = {};
            		var range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
            		for(var R = 0; R != data.length; ++R) {
            			for(var C = 0; C != data[R].length; ++C) {
            				if(range.s.r > R) range.s.r = R;
            				if(range.s.c > C) range.s.c = C;
            				if(range.e.r < R) range.e.r = R;
            				if(range.e.c < C) range.e.c = C;
            				var cell = {v: data[R][C] };
            				if(cell.v == null) continue;
           ...