Angular js，下载所有文件按钮
Posted
技术标签:
【中文标题】Angular js，下载所有文件按钮【英文标题】：Angular js, download all files button 【发布时间】：2015-09-14 15:10:39 【问题描述】：我有一个完整的 url 数组
“http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”
我基本上想要做的是单击按钮下载该阵列上的每个文件。 我目前正在使用下载属性来一一下载。但我必须实现一个“全部下载”按钮。有什么建议吗？
【问题讨论】：
你想在单次下载的同时使用download all吗？
你能把它们在服务器端打包成一个压缩包吗？
有非服务器端的解决方案吗？
这不是一个好主意（下载多个文件而不压缩），但请尝试阅读以下内容：***.com/questions/5353630/…
我不认为这在现代浏览器中是不可能的，除非使用像 flash 这样的 3rd 方。
【参考方案1】：
A.要使用文件数组从服务器 URL 下载多个文件，请执行以下步骤 -
Step 1. 将所有文件转换成base64string
var src = ['http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];
//using canvas to convert image files to base64string
function convertFilesToBase64String(src, callback, outputFormat)
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function ()
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
;
img.src = src;
if (img.complete || img.complete === undefined)
img.src = appConfig.config.dummyImage;
img.src = src;
第二步，然后使用下面的代码，一张一张的下载base64string转换后的图片-
function downloadFile(url, interval)
$timeout(function ()
var a = document.createElement('a');
document.body.appendChild(a);
a.download = name;
a.href = url;
a.click();
document.body.removeChild(a);
, (interval * 250));
注意 - 间隔用于给出多个文件下载之间的时间间隔。
B.要以 Zip 格式下载多个文件，我们可以使用 jsZip 和 FileSaver.js 或者 如果我们使用 Web API 和 Angularjs，那么我们可以创建一个 API 方法在服务器上创建 zip 归档文件，然后在 angularjs 中，我们可以使用 $http post 或获取 api 调用将文件下载为 zip 文件（我们必须使用 filesaver 来以 zip 格式保存文件）。 例如 -
angularjs 中的 api 调用 -
function downloadFiles(files)
return $http.post(baseUrl + 'api/download/files', files, responseType: 'arraybuffer' );
调用上述函数并在响应时使用 fileSaver.js 方法 saveAs 以 zip 格式保存文件，例如 -
//where files => array input of files like [http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];
downloadFiles(files).then(function (response)
//on success
var file = new Blob([response.data], type: 'application/zip' );
saveAs(file, 'example.zip');
, function (error)
//on error
//write your code to handle error
);
【讨论】：
【参考方案2】：好的，我创建了一些你想要的东西我不知道这是否是正确的方法，但它可以工作
html：
<body ng-app="myApp" ng-controller="myController">
<a id="id" ng-href="button" download></a>
<button ng-click="fun();$event.stopPropagation();">Download All</button>
</body>
脚本：
angular.module('myApp',[])
.controller("myController",myController)
function myController($scope)
var a = ["http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
"http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
"http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png"];
$scope.button ="http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png" ;
$scope.fun = function()
angular.forEach(a,function(value,key)
document.getElementById('id').click();
$scope.button = value;
);
【讨论】：
以上是关于Angular js，下载所有文件按钮的主要内容，如果未能解决你的问题，请参考以下文章
angular js入门总结，bootstrap引入不成功等问题
Angular 2 单元测试 - 出现错误无法加载“ng:///DynamicTestModule/module.ngfactory.js”
恢复文件从用户的机器上传到 Azure Blob 存储和从 Azure Blob 下载文件到用户的机器在 Typescript(angular) 从浏览器