AngularJS : Export and download object to file

AngularJS : Export and download object to file

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="DataController as vm">
  <pre style="margin-top:40px;">{{vm.object | json}}</pre>
  <br/>
  <input ng-model="vm.filename" placeholder="Specify filename" style=" padding: 5px 10px; float:left; width: 150px; height: 25px; border:0 ;" />
  <button style="background: #8bc34a; color: white; border: 0; padding: 10px 20px;float:left;" ng-click="vm.downloadObject()">
    Download to file
  </button>
</div>

JavaScript

angular
  .module('app', [])
  .controller('DataController', DataController)

function DataController() {

  var vm = this;
  vm.object = {
    firstname: "Daan",
    lastname: "De Smedt",
    location: "Belgium",
    website: "http://www.creative-geeks.com",
    twitter: "https://twitter.com/Creative_Geeks",
  };

  vm.downloadObject = function() {
    var filename = (angular.isUndefined(vm.filename)) ? 'filename' : vm.filename;
    var blob = new Blob([angular.toJson(vm.object, true)], {
      type: 'text/plain' // or application/json
    });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, filename);
    } else {
      var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
      a.download = filename;
      a.href = window.URL.createObjectURL(blob);
      a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
      e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      a.dispatchEvent(e);
      window.URL.revokeObjectURL(url); // clean the url.createObjectURL resource
    }
  }

}