Реализация AngularJS File Saver для загрузки большого текстового контента

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. Ниже приведена демонстрация моего приложения

Здесь я использую файл data.json, чтобы поместить данные в пользовательский интерфейс. И я хотел сохранить кнопку загрузки, чтобы пользователи могли нажимать, чтобы пользователи могли загружать содержимое, присутствующее в data.json

демонстрация

Answer 1

Сначала вы должны установить FileSaver с помощью менеджера пакетов (например, Bower) в проект, а затем вы можете использовать его в приложении.

1) Установите FileSaver, используя bower, установите FileSaver в Project

2) Определить модуль FileSaver

3) Ввести FileSaver в целевой контроллер

После успешной установки библиотеки, в вашем app.js обновите ваши коды, как показано ниже:

// 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);
        });
});