如何在单击按钮时让用户下载多个文件？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在单击按钮时让用户下载多个文件？相关的知识，希望对你有一定的参考价值。
所以我有一个httpd服务器运行，它有一堆文件的链接。假设用户从文件列表中选择三个文件进行下载，它们位于：
mysite.com/file1
mysite.com/file2
mysite.com/file3
当他们点击下载按钮时，我希望他们从上面的链接下载这三个文件。
我的下载按钮看起来像：
var downloadButton = new Ext.Button(
text: "Download",
handler: function()
//download the three files here
);
答案
最好的方法是将文件压缩并链接到：
另一种解决方案可以在这里找到：How to make a link open multiple pages when clicked
其中陈述如下：
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 );
);
另一答案
你可以：
- 压缩所选文件并返回一个压缩文件。
- 打开多个弹出窗口，每个弹出窗口都提示下载。
注意 - 选项一客观上更好。
编辑找到了一个选项三：https://stackoverflow.com/a/9425731/1803682
另一答案
我通过使用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]);
;
另一答案
<!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
另一答案
这适用于所有浏览器（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);
);
另一答案
我喜欢在click()上的a元素上执行for loop事件以进行多个文件下载仅适用于有限数量的文件（在我的情况下为10个文件）。解释这种对我来说有意义的行为的唯一原因是
以上是关于如何在单击按钮时让用户下载多个文件？的主要内容，如果未能解决你的问题，请参考以下文章