所以我有一个 httpd 服务器正在运行，它有一堆文件的链接。假设用户从文件列表中选择三个文件进行下载，它们位于：
mysite.com/file1
mysite.com/file2
mysite.com/file3
当他们单击下载按钮时，我希望他们从上面的链接下载这三个文件。
我的下载按钮看起来像：
var downloadButton = new Ext.Button({
text: "Download",
handler: function(){
//download the three files here
}
});
最好的方法是将文件压缩并链接到该文件：
可以在此处找到其他解决方案：如何使链接在单击时打开多个页面
其中规定了以下内容：
HTML：
<a href="#" class="yourlink">Download</a>
JS：
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('mysite.com/file1');
window.open('mysite.com/file2');
window.open('mysite.com/file3');
});
话虽如此，我仍然会压缩文件，因为这个实现需要 JavaScript，有时也可以作为弹出窗口被阻止。
这是最适合我的方法并且没有打开新标签，而是下载了我需要的文件/图像：
var filesForDownload = [];
filesForDownload( { path: "/path/file1.txt", name: "file1.txt" } );
filesForDownload( { path: "/path/file2.jpg", name: "file2.jpg" } );
filesForDownload( { path: "/path/file3.png", name: "file3.png" } );
filesForDownload( { path: "/path/file4.txt", name: "file4.txt" } );
$jq('input.downloadAll').click( function( e )
{
e.preventDefault();
var temporaryDownloadLink = document.createElement("a");
temporaryDownloadLink.style.display = 'none';
document.body.appendChild( temporaryDownloadLink );
for( var n = 0; n < filesForDownload.length; n++ )
{
var download = filesForDownload[n];
temporaryDownloadLink.setAttribute( 'href', download.path );
temporaryDownloadLink.setAttribute( 'download', download.name );
temporaryDownloadLink.click();
}
document.body.removeChild( temporaryDownloadLink );
} );
我喜欢在多个文件下载中的元素上执行click()事件仅适用于有限数量的文件（在我的情况下为 10 个文件）。解释这种对我有意义的行为的唯一原因是事件执行的下载速度/间隔。afor loopclick()
我发现，如果我减慢click()事件的执行速度，那么我将能够下载所有文件。
这是对我有用的解决方案。
var urls = [
'http://example.com/file1',
'http://example.com/file2',
'http://example.com/file3'
]
var interval = setInterval(download, 300, urls);
function download(urls) {
var url = urls.pop();
var a = document.createElement("a");
a.setAttribute('href', url);
a.setAttribute('download', '');
a.setAttribute('target', '_blank');
a.click();
if (urls.length == 0) {
clearInterval(interval);
}
}
我每 300 毫秒执行一次下载事件click()。当没有更多文件要下载urls.length == 0时，我执行停止下载clearInterval的功能。interval
您可以：
注意 - 选项一客观上更好。
我通过使用 window.location 以不同的方式解决了这个问题。它可以在 Chrome 中运行，幸运的是，它是我必须支持的唯一浏览器。可能对某人有用。我最初使用了 Dan 的答案，这也需要我在这里使用的超时时间，或者它只下载了一个文件。
var linkArray = [];
linkArray.push("http://example.com/downloadablefile1");
linkArray.push("http://example.com/downloadablefile2");
linkArray.push("http://example.com/downloadablefile3");
function (linkArray) {
for (var i = 0; i < linkArray.length; i++) {
setTimeout(function (path) { window.location = path; }, 200 + i * 200, linkArray[i]);
}
};
这适用于所有浏览器（IE11、Firefox、Microsoft Edge、Chrome 和 Chrome Mobile）我的文档位于多个选择元素中。当您尝试太快时，浏览器似乎有问题......所以我使用了超时。
<select class="document">
<option val="word.docx">some word document</option>
</select>
//user clicks a download button to download all selected documents
$('#downloadDocumentsButton').click(function () {
var interval = 1000;
//select elements have class name of "document"
$('.document').each(function (index, element) {
var doc = $(element).val();
if (doc) {
setTimeout(function () {
window.location = doc;
}, interval * (index + 1));
}
});
});
此解决方案使用承诺：
function downloadDocs(docs) {
docs[0].then(function (result) {
if (result.web) {
window.open(result.doc);
}
else {
window.location = result.doc;
}
if (docs.length > 1) {
setTimeout(function () { return downloadDocs(docs.slice(1)); }, 2000);
}
});
}
$('#downloadDocumentsButton').click(function () {
var files = [];
$('.document').each(function (index, element) {
var doc = $(element).val();
var ext = doc.split('.')[doc.split('.').length - 1];
if (doc && $.inArray(ext, docTypes) > -1) {
files.unshift(Promise.resolve({ doc: doc, web: false }));
}
else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) {
files.push(Promise.resolve({ doc: doc, web: true }));
}
});
downloadDocs(files);
});
<!DOCTYPE html>
<html ng-app='app'>
<head>
<title>
</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-cloack>
<div class="container" ng-controller='FirstCtrl'>
<table class="table table-bordered table-downloads">
<thead>
<tr>
<th>Select</th>
<th>File name</th>
<th>Downloads</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = 'tableData in tableDatas'>
<td>
<div class="checkbox">
<input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()">
</div>
</td>
<td>{{tableData.fileName}}</td>
<td>
<a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a>
<p>{{selectedone}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
app.js
var app = angular.module('app', []);
app.controller('FirstCtrl', ['$scope','$http', '$filter', function($scope, $http, $filter){
$scope.tableDatas = [
{name: 'value1', fileName:'file1', filePath: 'data/file1.txt', selected: true},
{name: 'value2', fileName:'file2', filePath: 'data/file2.txt', selected: true},
{name: 'value3', fileName:'file3', filePath: 'data/file3.txt', selected: false},
{name: 'value4', fileName:'file4', filePath: 'data/file4.txt', selected: true},
{name: 'value5', fileName:'file5', filePath: 'data/file5.txt', selected: true},
{name: 'value6', fileName:'file6', filePath: 'data/file6.txt', selected: false},
];
$scope.application = [];
$scope.selected = function() {
$scope.application = $filter('filter')($scope.tableDatas, {
checked: true
});
}
$scope.downloadAll = function(){
$scope.selectedone = [];
angular.forEach($scope.application,function(val){
$scope.selectedone.push(val.name);
$scope.id = val.name;
angular.element('#'+val.name).closest('tr').find('.downloadable')[0].click();
});
}
}]);
plunker 示例：https ://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview
这是我发现下载多个文件的最简单方法。
$('body').on('click','.download_btn',function(){
downloadFiles([
['File1.pdf', 'File1-link-here'],
['File2.pdf', 'File2-link-here'],
['File3.pdf', 'File3-link-here'],
['File4.pdf', 'File4-link-here']
]);
})
function downloadFiles(files){
if(files.length == 0){
return;
}
file = files.pop();
var Link = $('body').append('<a href="'+file[1]+'" download="file[0]"></a>');
Link[0].click();
Link.remove();
downloadFiles(files);
}
这应该适合你。谢谢你。
//It is possible when using Tampermonkey (Firefox or Chrome).
//They added the GM_Download command.
//You can use it like this download multiple files One time:
// ==UserScript==
// @name
// @description
// @match
// @grant
// @grant GM_download
function setup_reader(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function (e) {
var bin = e.target.result; //get file content
var lines = bin.split('\n');
for (var line = 0; line < lines.length; line++) {
console.log(lines[line]);
GM_download(lines[line], line + '.jpg');
}
}
// reader.readAsBinaryString(file);
reader.readAsText(file, 'utf-8');//
}