web-dev-qa-db-ja.com

AngularJSを使用してファイルを作成してローカルファイルシステムに保存する方法は？

データをログインする前にファイルを作成して保存したい。以下の方法は、データを作成してファイルに保存するもので、Chromeブラウザーでのみサポートされています。空のファイルを作成して保存し、そこにデータを記録し、IEおよび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')
}
javascriptangularjsfile
13
hussain

ファイルシステムに保存

angular-file-saver をご覧ください

または、BLOBを保存する際の参照として次のコードを使用します。 blobオブジェクトは、JSONオブジェクトから生成されます。ただし、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(a.href); // clean the url.createObjectURL resource
        }
    }

LocalStorageの使用

LocalStorageへの保存：

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

LocalStorageから取得する

window.localStorage.getItem('key');

LocalStorageからキーを削除します

window.localStorage.removeItem('key');

または、AngularJSモジュールを使用して 'ngStorage'

ブラウザの互換性

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

ライブの例を参照（@cOlzのクレジット）

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

15
daan.desmedt
$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) {

        });

成功部分では、ユーザーがファイルを保存する場所を選択できるローカルシステムを開く必要があります。ここでは、<a>。そして私は安らかなサービスを打つ

7
Sangram Badi

AngularJSでローカルにファイルをダウンロードする方法（デモを使用）

download属性を持つ<a>タグを使用します。

<a download="{{files[0].name}}" xd-href="data">
  <button>Download data</button>
</a>

xd-hrefディレクティブ：

app.directive("xdHref", function() {
  return function linkFn (scope, elem, attrs) {
     scope.$watch(attrs.xdHref, function(newVal) {
       newVal && elem.attr("href", newVal);
     });
  };
});

ダウンロードするとき、ブラウザはユーザーに確認またはキャンセルできるダイアログを表示します。詳細については、「 MDN HTMLリファレンス-<a>タグ 」を参照してください。

デモ

angular.module("app",[])
.controller("myVm", function($scope, $http, $window) {
  var vm = $scope;
  var url = "//httpbin.org/post";
  var config = { headers: {"Content-Type": undefined} };

  vm.upload = function() {
    vm.spin = "Uploading...";
    $http.post(url, vm.files[0], config).
     then(function(response) {
      vm.result = "SUCCESS";
      vm.data = response.data.data;
    }).catch(function(response) {
      vm.result = "ERROR "+response.status;
    }).finally(function() {
      vm.spin = undefined
    });
  };
})
.directive("xdHref", function() {
  return function linkFn (scope, elem, attrs) {
     scope.$watch(attrs.xdHref, function(newVal) {
       newVal && elem.attr("href", newVal);
     });
  };
})
.directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      });
    }
  };
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="myVm">
    <h2>Upload and Download File with AngularJS</h2>
    <input type="file" select-ng-files ng-model="files">
    <br>
    <code>
    Name: {{files[0].name}}<br>
    Size: {{files[0].size}}<br>
    Type: {{files[0].type}}<br>
    Date: {{files[0].lastModifiedDate}}<br>
    </code>
    <button ng-click="upload()" ng-disabled="!files">
      Upload
    </button>
    <span ng-show="spin">{{spin}}</span>
    <span ng-show="result">{{result}}</span>
    <a download="data_{{files[0].name}}" xd-href="data">
      <button ng-disabled="!data">Download data</button>
    </a>
    
  </body>

ng-model for <input type=“file”/>（ディレクティブDEMOを使用） も参照してください。

0
georgeawg