AngularJSファイルセーバーを実装して大きなテキストコンテンツをダウンロードする

Question

非常に大きなテキストデータをダウンロードしたいファイルサーバーを実装したかったのです。私は、このような

Angular JS File Saver

<div class="wrapper" ng-controller="ExampleCtrl as vm"> 
    <textarea 
    ng-model="vm.val.text" 
    name="textarea" rows="5" cols="20"> 
     Hey ho let's go! 
    </textarea> 
    <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)"> 
    Download 
    </a> 
</div> 

としてすでに利用可能ないくつかのライブラリがありました。しかし、私は私のAngularJSアプリに実装する必要がありますどのように、スタンドの下にはできませんよ。以下はMy Appのデモです

ここでは、data.jsonファイルを使用してUIにデータを入れています。そして、私はあなたが最初のパッケージマネージャ（すなわちバウアー）を使用してFileSaverをインストールする必要があり、ユーザはbuttongユーザーがdata.jsonに

Demo

Answer 1

をコンテンツの存在をダウンロードすることができなければならないことをクリックダウンロードボタンを維持したいですプロジェクトに追加して、アプリケーションで使用することができます。

1）インストールFileSaverはあなたのapp.jsで、首尾ライブラリをインストールFileSaverモジュールターゲットコントローラで

3）を注入FileSaver

後に定義）プロジェクト

に

2をFileSaverをインストール亭を使用してコードを次のように更新してください：

// Define module here 
var app = angular.module('studentApp', ['FileSaver']); 

// Inject FileSaver into target controller 
app.controller('StudentCntrl', function($scope,$http, FileSaver) {  
    $scope.vm.download = function (data) { 
     if (!data) { 
     console.error('No data'); 
     return; 
     } 

     var newData = new Blob([data], { type: 'text/plain;charset=utf-8' }); 
     FileSaver.saveAs(newData, 'text.txt'); 
    }; 

    $http.get('data.json').then(function (response){ 
        console.log(response.data.pages); 
       $scope.data = response.data.PersonEvent.Body; 
       $scope.vm.download($scope.data); 
     }); 
});