<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdn.rawgit.com/urish/angular-load/master/angular-load.min.js"></script>
    
    <!-- <script src="https://cdn.rawgit.com/bpampuch/pdfmake/master/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script> -->
    
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl as vm" class="container" style="padding-top: 10px">
    <h1>{{vm.title}}</h1>
    <div>{{vm.status}}</div>
    <button class="btn btn btn-primary" ng-click="vm.changeTitle('Changed title')">Change the title</button>
    <div demo-content="" name="SuperDuper"></div>
    <p>
      <button class="btn btn btn-primary" ng-click="vm.createXlsx()">Create & download XLSX</button>
    </p>
    <p>
      <button class="btn btn btn-primary" ng-click="vm.createPdf()">Create & download PDF</button>
    </p>
  </body>

</html>
// Code goes here

angular.module('app', ['angularLoad']);

angular.module('app')
  .controller('mainCtrl', MainController);

MainController.$inject = ['$q', 'angularLoad'];

function MainController($q, angularLoad) {
  var vm = this;

  vm.title = "AngularJS/Bootstrap Starter Template";
  vm.status = '';
  vm.changeTitle = changeTitle;
  vm.createXlsx = createXlsx;
  vm.createPdf = createPdf;

  function changeTitle(name) {
    vm.title = name;
  }

  function createPdf() {
    
    var promises = [
        angularLoad.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/master/build/pdfmake.min.js'),
        angularLoad.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js'),
        angularLoad.loadScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js'),
      ];
      
    $q.all(promises)
      .then(function() {
        // all scripts loaded succesfully.
        createPdf_whenScriptsLoaded();
      }).catch(function() {
        // There was some error loading the script. Meh
      });
  }

  function createPdf_whenScriptsLoaded() {
    var docDefinition = {
      pageMargins: [72, 80, 40, 60],
      layout: 'headerLineOnly',
      pageSize: 'A4',
      header: function() {

        return {
          columns: [{
            text: 'Csharp',
            width: 200,
            margin: [50, 20, 5, 5]
          }, {
            stack: [{
              text: 'Project Details',
              alignment: 'right',
              fontSize: 12,
              margin: [0, 30, 50, 0]
            }]
          }]
        }
      },

      footer: function(currentPage, pageCount) {
        return {
          stack: [{
            canvas: [{
              type: 'line',
              x1: 0,
              y1: 5,
              x2: 595,
              y2: 5,
              lineWidth: 1,
              lineColor: '#ffff00',
              style: ['lineSpacing']
            }]
          }, {
            text: '',
            margin: [0, 0, 0, 5]
          }, {
            columns: [{}, {
              text: currentPage.toString(),
              alignment: 'center'
            }, {
              text: moment(new Date()).format("DD-MMM-YYYY"),
              alignment: 'right',
              margin: [0, 0, 20, 0]
            }]
          }]

        };
      },
      content: [{
        stack: getTable()
      }],
      styles: {
        'lineSpacing': {
          margin: [0, 0, 0, 6]
        },
        'doublelineSpacing': {
          margin: [0, 0, 0, 12]
        },
        'headingColor': {
          color: '#999966'
        },
        tableHeader: {
          bold: true,
          fontSize: 13,
          color: '#669999'
        }
      }
    }

    //  pdfMake.createPdf(docDefinition).open();
    var date = new Date();
    date = moment(date).format('DD_MMM_YYYY_HH_mm_ss');
    pdfMake.createPdf(docDefinition).download('PDF_' + date + '.pdf');
  }

  var getLayout = function() {
    return {
      hLineWidth: function() {
        return 0.1;
      },
      vLineWidth: function() {
        return 0.1;
      },
      hLineColor: function() {
        return 'gray';
      },
      vLineColor: function() {
        return 'gray';
      }
    };
  };


  var getTable = function() {
    return [{
        text: 'PDF Print Test',
        fontSize: 20,
        bold: false,
        alignment: 'center',
        style: ['lineSpacing', 'headingColor']
      }, {
        canvas: [{
          type: 'line',
          x1: 0,
          y1: 5,
          x2: 595 - 2 * 40,
          y2: 5,
          lineWidth: 1,
          lineColor: '#990033',
          style: ['lineSpacing']
        }]
      }, {
        text: '',
        style: ['doublelineSpacing']
      }, {
        table: {
          widths: ['auto', 'auto', 'auto', 'auto'],
          headerRows: 1,
          // keepWithHeaderRows: 1,
          body: [
            ['Project', {
              text: 'Technology',
              style: 'tableHeader'
            }, 'Language', 'Database'],
            ['Intranet', 'Microsoft', {
              text: 'Sharepoint',
              colSpan: 2
            }, {}],
            ['Online Jobs', 'Microsoft', 'Asp.Net', 'SQL Server']

          ]
        },
        layout: getLayout()
      }

    ];
  };

  function createXlsx() {
    vm.status = 'loading...';

    var promises = [
      angularLoad.loadScript('https://cdn.rawgit.com/SheetJS/js-xlsx/master/dist/xlsx.core.min.js'),
      angularLoad.loadScript('https://cdn.rawgit.com/eligrey/Blob.js/master/Blob.js'),
      angularLoad.loadScript('https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.js'),
    ];

    $q.all(promises)
      .then(function() {
        // Script loaded succesfully.
        // We can now start using the functions from someplugin.js
        vm.status = 'success';

        createXlsx_whenScriptsLoaded();

      }).catch(function() {
        // There was some error loading the script. Meh
        vm.status = 'fail!';
      });
  }

  function createXlsx_whenScriptsLoaded() {
    vm.status = 'create xlsx';

    // original data
    var data = [
      [1, 2, 3],
      [true, false, null, "sheetjs"],
      ["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"],
      ["baz", null, "qux"],
      ["Daily Calories", 2600],
      ["Protein", 155 + " g", "35%"],
      ["Fats", 40 + " g", "30%"],
      ["Carbs", 160 + " g", "35%"]
    ];
    var ws_name = "Kinobody Calories, Macros";

    var wb = new Workbook();
    var ws = sheet_from_array_of_arrays(data);

    // add worksheet to workbook 
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    // create excel in memory
    var wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'binary'
    });

    // send to browser
    saveAs(new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
    }), "test.xlsx");

    vm.status = 'done';
  }

  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 sheet_from_array_of_arrays(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;
        var cell_ref = XLSX.utils.encode_cell({
          c: C,
          r: R
        });

        if (typeof cell.v === 'number') cell.t = 'n';
        else if (typeof cell.v === 'boolean') cell.t = 'b';
        else if (cell.v instanceof Date) {
          cell.t = 'n';
          cell.z = XLSX.SSF._table[14];
          cell.v = datenum(cell.v);
        } else cell.t = 's';

        ws[cell_ref] = cell;
      }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
  }

  function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
  }

  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

angular.module('app').directive('demoContent', function() {
  return {
    scope: {
      name: '@'
    },
    template: '<div class="well">The name is: {{name}}</div>',
  };
});
/* Styles go here */

Testing XLSX export:

https://github.com/SheetJS/js-xlsx
http://sheetjs.com/demos/table.html

https://rawgit.com/eligrey/Blob.js/master/Blob.js

https://github.com/urish/angular-load

http://www.ryansouthgate.com/2016/04/19/q-all-combining-promises-in-angularjs-2/

// sheetJS extension with styling:
https://github.com/protobi/js-xlsx

http://rawgit.com/

// PDF
http://www.c-sharpcorner.com/blogs/generate-pdf-using-pdf-make-and-angularjs


// 
https://github.com/bpampuch/pdfmake
http://pdfmake.org/#/
https://github.com/MrRio/jsPDF
https://parall.ax/products/jspdf
http://chancejs.com/

// Ionic
http://ionicframework.com/
https://github.com/ashteya/ionic-tutorial-pdf
http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/