Come creare e salvare file su file system locale usando AngularJS?

Question

Voglio creare e salvare il file prima di registrare i dati in esso. Il metodo seguente sta creando e salvando i dati su file ed è supportato solo dal browser Chrome. Come posso creare e salvare file vuoti e quindi registrare i dati in esso e ho supporto per IE e Chrome?

ctrl.js:

function download(text, name, type) { 
    var a = document.getElementById("a"); 
    var file = new Blob([text], {type: type}); 
    a.href = URL.createObjectURL(file); 
    a.download = name; 
} 
$scope.recordLogs = function(){ 
    download('file text', 'myfilename.txt', 'text/plain') 
} 

Answer 1

Salva filesystem

Dai un'occhiata alla angular-file-saver

o utilizzare il codice riportato di seguito come riferimento nel salvare un BLOB. Dove l'oggetto blob viene generato da un oggetto JSON. Ma è anche possibile l'estrazione in un file TEXT.

// export page definition to json file 
    $scope.exportToFile = function(){ 
     var filename = 'filename'  
     var blob = new Blob([angular.toJson(object, true)], {type: 'text/plain'}); 
     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 
     } 
    } 

Utilizzando LocalStorage

Salvataggio in localStorage:

window.localStorage.setItem('key', value); 

Arrivare da localStorage

window.localStorage.getItem('key'); 

tasto Canc da localStorage

window.localStorage.removeItem('key'); 

o utilizzando il modulo AngularJS 'ngStorage'

compatibilità del browser

Chrome - 4  
Firefox (Gecko) - 3.5  
Internet Explorer - 8  
Opera - 10.50  
Safari (WebKit) - 4 

vedi esempio dal vivo (crediti a @cOlz)

https://codepen.io/gMohrin/pen/YZqgQW

Answer 2

$http({ 

      method : 'GET', 
      url : $scope.BASEURL + 'file-download?fileType='+$scope.selectedFile, 
      responseType: 'arraybuffer', 
      headers : { 
       'Content-Type' : 'application/json' 
      } 

     }).success(function(data, status, headers, config) { 
      // TODO when WS success 
      var file = new Blob([ data ], { 
       type : 'application/json' 
      }); 
      //trick to download store a file having its URL 
      var fileURL = URL.createObjectURL(file); 
      var a   = document.createElement('a'); 
      a.href  = fileURL; 
      a.target  = '_blank'; 
      a.download = $scope.selectedFile+'.json'; 
      document.body.appendChild(a); 
      a.click(); 

     }).error(function(data, status, headers, config) { 

     }); 

In caso di successo è necessario aprire il sistema locale, tramite il quale l'utente può scegliere, dove salvare il file. Qui ho usato <a>. E sto colpendo servizio riposante