我有一个运行着的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 );
} );
temporaryDownloadLink.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent( download.path)); 这段代码用于强制浏览器下载图像而不是在新标签页中打开它。 - JasperJ.push 方法？ - Klesun我发现在 for循环 中执行 a 元素上的 click() 事件进行多文件下载只适用于有限数量的文件（在我的情况下是10个文件）。唯一能解释这种行为的原因，对我来说有意义的，是由于 click() 事件所执行的下载速度/间隔造成的。
我想到了一个解决方法，如果我减缓 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函数停止下载。
我通过使用window.location以不同的方式解决了这个问题。它在Chrome中有效，而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]);
}
};
使用：
<!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>
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();
});
}
}]);
$('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);
}
<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);
});
iframe。function download(){
const links = ["mysite.com/file1", "mysite.com/file2", "mysite.com/file3"]
// It only works with files that don't render in the browser
// I.e., not video, not text, not and photo
for(let i = 0; i < links.length; i++) {
var frame = document.createElement("iframe");
frame.src = links[i];
frame["download"] = 1
document.body.appendChild(frame);
}
}iframe{
display: none;
}<body>
<div onclick="download()">Download</div>
</body>var downloadButton = new Ext.Button({
text: "Download",
handler: function () {
/** @type {Array<string>} URLS */
const URLS = [
"mysite.com/file1 ",
"mysite.com/file2",
"mysite.com/file3",
];
for (let x = 0; x < URLS.length; x++) {
/** @type {string} URL */
const URL = URLS[x];
/** @type {HTMLLinkElement} LINK */
const LINK = document.createElement('a');
LINK.href = URL;
LINK.setAttribute('download', 'download');
document.body.appendChild(LINK);
LINK.click();
LINK.parentNode.removeChild(LINK);
window.URL.revokeObjectURL(URL);
}
}
});