Question

我正在尝试根据用户从文件列表中选择下载许多文件。我熟悉单个文件的<a href="/images/myw3schoolsimage.jpg" download="w3logo">下载属性，但这个问题的不同之处在于您从列表中选择了多个文件，然后选择下载按钮。下面描述的Plunker应该说明我的问题。

我试图在Angular / JQLite中弄清楚如何下载文件。我一直在阅读$ window，但似乎无法让下载发生。

Plunker： http://plnkr.co/edit/YVE80FPJZXH0lD0li9M8

angular.module('app').directive('documentList', function(){
return {
  templateUrl: 'doclistview.html',
  restrict: 'E',
  scope: {},
  controller: function ($scope, $window) {
    $scope. downloadDocuments = function() {
      getSelectedDocuments();
      _.each($scope.selectedDocuments, function (document){
        //How to download multiple files
        $window.open(document.Template, '_blank', '');
      })
    }

    function getSelectedDocuments() {
        $scope.selectedDocuments = _.where($scope.documents, {"selected": true});
    }

    //This can really be any file type but I just plucked some images online to simplify.
    $scope.documents = [
        {"FileName": "Cube Image.png", "FileType": "png", "Template": "http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"}
        ,{"FileName": "Dice Roll", "FileType": "jpeg", "Template": "http://nathaningram.com/wp-content/uploads/2011/12/random-image1.jpg"}
        ,{"FileName": "RAWR!!!", "FileType": "jpeg", "Template": "http://images2.fanpop.com/image/photos/8600000/random-animals-animals-8676039-1600-1200.jpg"}
    ]
  }
}

}）;

我会继续修补，但非常感谢任何帮助。

Answer 1

我最终使用angular-file-saver（filesaver）来解决我的问题。

以下是更新的Plunker：http://plnkr.co/edit/XmyLCpwJTodBrMrW2QHZ

$scope. downloadDocuments = function() {
getSelectedDocuments();
_.each($scope.selectedDocuments, function (document){
  var config = {
      data: base64toBlob(document.Template, document.MimeType),
      filename: document.FileName
  }
  fileSaver.saveAs(config);
});

}

在浏览器中下载多个文件/文档

1 个答案: