Question

我想实现filesaver，我想下载非常大的文本数据。我看到有一些库已经可用，例如

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

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

1 个答案: