实施 AngularJS 文件保护程序以下载大文本内容

Question

我想在我想下载非常大的文本数据的地方实施文件保护程序。我看到有一些库已经可用，例如

<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文件将数据放入UI。我想保留一个下载按钮，用户单击按钮用户应该能够下载 data.json

中存在的内容

Demo

Answer 1

您必须先使用包管理器（即 Bower）将 FileSaver 安装到项目中，然后才能在应用程序中使用它。

1) 使用 bower 安装 FileSaver install FileSaver into 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);
        });
});

实施 AngularJS 文件保护程序以下载大文本内容

Implementing AngularJS file saver to download large text content

html

angularjs

filesaver.js