如何在单击按钮时让用户下载多个文件？

a14dhokn 于 2022-09-26 发布在其他

关注(0)|答案(11)|浏览(314)

所以我有一个httpd服务器在运行，它有一系列文件的链接。假设用户从文件列表中选择三个文件进行下载，它们位于：

mysite.com/file1 
mysite.com/file2
mysite.com/file3

当他们点击下载按钮时，我希望他们从上面的链接下载这三个文件。
我的下载按钮类似于：

var downloadButton = new Ext.Button({
  text: "Download",
  handler: function(){
    //download the three files here
  }
});

extjs

来源：https://stackoverflow.com/questions/18451856/how-can-i-let-a-user-download-multiple-files-when-a-button-is-clicked

11条答案

按热度按时间

s4chpxco1#

最好的方法是压缩文件并链接到该文件：
另一种解决方案可以在这里找到：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，有时也会被阻塞为弹出窗口。

赞(0）回复(0）举报 2022-09-26

tyu7yeag2#

这是最适合我的方法，没有打开新的选项卡，只是下载了我需要的文件/图像：

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 );
} );

赞(0）回复(0）举报 2022-09-26

7fyelxc53#

我喜欢对for loop内的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时，我对interval函数执行clearInterval以停止下载。

赞(0）回复(0）举报 2022-09-26

1cklez4t4#

您可以：
1.压缩所选文件并返回压缩文件。
1.打开多个弹出窗口，每个弹出窗口提示下载。
请注意，选项一客观上更好。

编辑找到选项三：https://stackoverflow.com/a/9425731/1803682

赞(0）回复(0）举报 2022-09-26

rslzwgfq5#

我使用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]);
  }        
};

赞(0）回复(0）举报 2022-09-26

ogsagwnx6#

<!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

赞(0）回复(0）举报 2022-09-26

du7egjpx7#

这适用于所有浏览器（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);
});

赞(0）回复(0）举报 2022-09-26

watbbzwu8#

这是我找到的下载多个文件的最简单方法。

$('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);
}

这应该对你有用。非常感谢。

赞(0）回复(0）举报 2022-09-26

abithluo9#

你可以去iframe
注意：虽然这是一次下载多个文件的少数几种方法之一，但不创建弹出窗口，这对可以在浏览器中呈现的文件不起作用检查js注解
注2：有些浏览器可能会要求许可从同一页面下载多个文件

function download(){
  const links = ["mysite.com/file1", "mysite.com/file2", "mysite.com/file3"]
  // only works with files that don't render in browser
  // ie: not video, not text, not 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);
  }
}

b1a1a

<body>
  <div onclick="download()">Download</div>
</body>

赞(0）回复(0）举报 2022-09-26

vdzxcuhz10#

这个解决方案对我来说非常好

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);
        }
    }
});

赞(0）回复(0）举报 2022-09-26

dly7yett11#

//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');//
}

赞(0）回复(0）举报 2022-09-26

我来回答

如何在单击按钮时让用户下载多个文件？

11条答案

相关问题

热门标签

最新问答