Tải xuống nhiều tệp với một thao tác duy nhất


109

Tôi không chắc liệu điều này có khả thi bằng cách sử dụng các công nghệ web tiêu chuẩn hay không.

Tôi muốn người dùng có thể tải xuống nhiều tệp trong một hành động. Đó là bấm vào hộp kiểm bên cạnh tệp, sau đó lấy tất cả các tệp đã được chọn.

Có thể không - nếu có thì bạn đề xuất chiến lược cơ bản nào. Tôi biết mình có thể sử dụng công nghệ sao chổi để tạo các sự kiện phía máy chủ kích hoạt HttpResponse nhưng tôi hy vọng có một cách đơn giản hơn.

Câu trả lời:


60

HTTP không hỗ trợ tải xuống nhiều tệp cùng một lúc.

Có hai giải pháp:

  • Mở x số lượng cửa sổ để bắt đầu tải xuống tệp (điều này sẽ được thực hiện với JavaScript)
  • giải pháp ưu tiên tạo một tập lệnh để nén các tệp

39
Tại sao tệp zip là giải pháp ưu tiên ? Nó tạo thêm một bước cho người dùng (giải nén).
bay cao tốc

7
Trang này chứa javascript tạo tệp ZIP. Nhìn vào trang nó có một ví dụ tuyệt vời. stuk.github.io/jszip
Netsi1964

Cách thứ ba là đóng gói các tệp vào một tệp SVG. Nếu các tệp được hiển thị trong trình duyệt, SVG có vẻ là cách tốt nhất.
VectorVortec

4
Bản thân HTTP hỗ trợ định dạng tin nhắn nhiều phần. Tuy nhiên, các trình duyệt không phân tích cú pháp các phản hồi nhiều phần từ phía máy chủ một cách dễ dàng, nhưng về mặt kỹ thuật thì không có gì khó khăn khi thực hiện việc này.
CMCDragonkai

2
Điều này có thể là một giải pháp xuất sắc với javascript github.com/sindresorhus/multi-download
juananruiz

84

var links = [
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];

function downloadAll(urls) {
  var link = document.createElement('a');

  link.setAttribute('download', null);
  link.style.display = 'none';

  document.body.appendChild(link);

  for (var i = 0; i < urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}
<button onclick="downloadAll(window.links)">Test me!</button>


3
Tôi đang làm việc với nhiều loại tệp, bao gồm cả hình ảnh và điều này phù hợp nhất với tôi. Tuy nhiên, đã link.setAttribute('download', null);đổi tên tất cả các tệp của tôi thành null.
tehlivi

7
Nó không hoạt động trong IE 11, nó chỉ tải xuống .jar (mục cuối cùng trong danh sách), đó là giải pháp hoàn hảo :(
Immutable Brick

1
@AngeloMoreira Yep, ít nhất nó hoạt động trong Edge. Ví dụ: nếu bạn thử tải xuống nhiều tệp trong IE trên các trang web MS , chúng tạo ra nhiều cửa sổ bật lên, vì vậy tôi nghĩ giải pháp tốt nhất cho IE vẫn là từ Dmitry Nogin ở trên .
Matěj Pokorný

1
@tehlivi - Tôi cũng tìm thấy điều tương tự. Thêm link.setAttribute('download',filename)vòng lặp bên trong. Điều này cho phép bạn đặt tên tệp bất kỳ thứ gì bạn muốn. Ngoài ra, tôi tin rằng nó chỉ cần là tên tệp không bao gồm URL. Cuối cùng tôi đã gửi hai mảng: một mảng có URL đầy đủ và một mảng chỉ có tên tệp.
PhilMDev

7
Nó không hoạt động bình thường trong Chrome v75, Windows 10: Tệp duy nhất được tải xuống là Minecraft.jar.
andreivictor

54

Bạn có thể tạo một bộ iframe ẩn tạm thời, bắt đầu tải xuống bằng GET hoặc POST bên trong chúng, đợi quá trình tải xuống bắt đầu và xóa iframe:

<!DOCTYPE HTML>
<html>
<body>
  <button id="download">Download</button> 

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">

     $('#download').click(function() {
       download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');
     });

     var download = function() {
       for(var i=0; i<arguments.length; i++) {
         var iframe = $('<iframe style="visibility: collapse;"></iframe>');
         $('body').append(iframe);
         var content = iframe[0].contentDocument;
         var form = '<form action="' + arguments[i] + '" method="GET"></form>';
         content.write(form);
         $('form', content).submit();
         setTimeout((function(iframe) {
           return function() { 
             iframe.remove(); 
           }
         })(iframe), 2000);
       }
     }      

  </script>
</body>
</html>

Hoặc, không có jQuery:

 function download(...urls) {
    urls.forEach(url => {
      let iframe = document.createElement('iframe');
      iframe.style.visibility = 'collapse';
      document.body.append(iframe);

      iframe.contentDocument.write(
        `<form action="${url.replace(/\"/g, '"')}" method="GET"></form>`
      );
      iframe.contentDocument.forms[0].submit();

      setTimeout(() => iframe.remove(), 2000);
    });
  }

tuyệt vời, nhưng vì một số lý do mà các tệp không được tải xuống. Đối với tôi, lý do có vẻ như trang tải lại sau khi tập lệnh được thực thi, dường như là lý do khiến các tệp không được tải xuống. Bất kỳ manh mối về những gì tôi đang làm sai?
Chirag Mehta

Tôi có nhiều vấn đề với giải pháp này. Trong IE vì cửa sổ cha của tôi đã thay đổi miền document.domain, tôi có quyền truy cập bị từ chối. Có rất nhiều bài đăng về việc sửa lỗi này, nhưng tất cả đều cảm thấy khó hiểu. Trong Chrome, người dùng nhận được lời nhắc một thông báo cảnh báo cho biết trang web cố gắng tải nhiều tệp (nhưng ít nhất nó hoạt động). Trong Firefox, tôi nhận được hộp dowload khác nhau nhưng khi tôi bấm Save, tôi không nhận được tiết kiệm thoại tập tin ...
Melanie

Điều này không hiệu quả với tôi vì hộp thoại tệp "chặn" các hộp thoại lưu khác xuất hiện. Những gì tôi đã làm là một cái gì đó hơi hack - hành động di chuyển chuột chỉ đăng ký sau khi hộp thoại tệp biến mất, vì vậy tôi đã sử dụng nó - nhưng nó không được thử nghiệm. Tôi sẽ thêm nó như một câu trả lời khác.
Karel Bílek

2
Điều này có hoạt động trong IE10 không? Tôi nhận được: Đối tượng không hỗ trợ thuộc tính hoặc phương thức 'write'
Hoppe

tại sao hàm trả về (đóng cửa?) trên setTimeout()?
robisrob

34

Giải pháp này hoạt động trên các trình duyệt và không kích hoạt cảnh báo. Thay vì tạo một iframe, ở đây chúng tôi tạo một liên kết cho mỗi tệp. Điều này ngăn các thông báo cảnh báo xuất hiện.

Để xử lý phần lặp, chúng tôi sử dụng setTimeout, điều này cần thiết để nó hoạt động trong IE.

/**
 * Download a list of files.
 * @author speedplane
 */
function download_files(files) {
  function download_next(i) {
    if (i >= files.length) {
      return;
    }
    var a = document.createElement('a');
    a.href = files[i].download;
    a.target = '_parent';
    // Use a.download if available, it prevents plugins from opening.
    if ('download' in a) {
      a.download = files[i].filename;
    }
    // Add a to the doc for click to work.
    (document.body || document.documentElement).appendChild(a);
    if (a.click) {
      a.click(); // The click method is supported by most browsers.
    } else {
      $(a).click(); // Backup using jquery
    }
    // Delete the temporary link.
    a.parentNode.removeChild(a);
    // Download the next file with a small timeout. The timeout is necessary
    // for IE, which will otherwise only download the first file.
    setTimeout(function() {
      download_next(i + 1);
    }, 500);
  }
  // Initiate the first download.
  download_next(0);
}
<script>
  // Here's a live example that downloads three test text files:
  function do_dl() {
    download_files([
      { download: "http://www.nt.az/reg.txt", filename: "regs.txt" },
      { download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },
      { download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },
    ]);
  };
</script>
<button onclick="do_dl();">Test downloading 3 text files.</button>


Đây là cái duy nhất ở đây phù hợp với tôi, vì tôi phải hỗ trợ IE. Cảm ơn bạn.
Øystein Amundsen

1
Câu trả lời này là vàng. Chỉ một ứng dụng hoạt động trong tất cả các trình duyệt mà không có thông báo cảnh báo. Đặc biệt IE. Brilliant thứ
Mukul Goel

Không làm việc trong Chrome OSX, nó hỏi tôi cho phép nhiều tải nhưng ngay cả nếu tôi làm, chỉ có file đầu tiên sẽ được tải về và tôi nghe một số lượng "beep" tương ứng với số lượng file tải về trái
Allan Raquin

2
Nút không làm gì cả Google Chrome Version 76.0.3809.100 (Official Build) (64-bit).
1934286

1
Nút không hoạt động trong phần tràn ngăn xếp Chạy đoạn mã. Trình duyệt Crome @speedplane
MB

5

Cách dễ nhất là phân phát nhiều tệp được gộp chung vào một tệp ZIP.

Tôi cho rằng bạn có thể bắt đầu tải xuống nhiều tệp bằng cách sử dụng nhiều khung nội tuyến hoặc cửa sổ bật lên, nhưng từ quan điểm khả năng sử dụng, tệp ZIP vẫn tốt hơn. Ai muốn nhấp qua mười hộp thoại "Lưu dưới dạng" mà trình duyệt sẽ hiển thị?


3
Tôi nhận ra câu trả lời của bạn là từ năm 2010, nhưng rất nhiều người dùng đang duyệt web bằng điện thoại thông minh ngày nay, một số trong số đó không thể mở khóa nén theo mặc định (một người bạn cho tôi biết Samsung S4 Active của anh ấy không thể mở khóa khóa).
Hydraxan 14

4

Tôi đồng ý rằng tệp zip là một giải pháp gọn gàng hơn ... Nhưng nếu bạn phải đẩy nhiều tệp, đây là giải pháp mà tôi đã đưa ra. Nó hoạt động trên IE 9 trở lên (có thể cả phiên bản thấp hơn - tôi chưa thử nghiệm nó), Firefox, Safari và Chrome. Chrome sẽ hiển thị thông báo cho người dùng để họ đồng ý tải xuống nhiều tệp trong lần đầu tiên trang web của bạn sử dụng.

function deleteIframe (iframe) {
    iframe.remove(); 
}
function createIFrame (fileURL) {
    var iframe = $('<iframe style="display:none"></iframe>');
    iframe[0].src= fileURL;
    $('body').append(iframe);
    timeout(deleteIframe, 60000, iframe);             
 }
 // This function allows to pass parameters to the function in a timeout that are 
 // frozen and that works in IE9
 function timeout(func, time) {
      var args = [];
      if (arguments.length >2) {
           args = Array.prototype.slice.call(arguments, 2);
      }
      return setTimeout(function(){ return func.apply(null, args); }, time);
 }
 // IE will process only the first one if we put no delay
 var wait = (isIE ? 1000 : 0);
 for (var i = 0; i < files.length; i++) {  
      timeout(createIFrame, wait*i, files[i]);
 }

Tác dụng phụ duy nhất của kỹ thuật này, là người dùng sẽ thấy độ trễ giữa gửi và hộp thoại tải xuống hiển thị. Để giảm thiểu tác động này, tôi khuyên bạn nên sử dụng kỹ thuật được mô tả ở đây và đối với câu hỏi này. Phát hiện khi trình duyệt nhận được tệp tải xuống có cài đặt cookie với tệp của bạn để biết tệp đã bắt đầu tải xuống. Bạn sẽ phải kiểm tra cookie này ở phía máy khách và gửi nó ở phía máy chủ. Đừng quên đặt đường dẫn thích hợp cho cookie của bạn nếu không bạn có thể không nhìn thấy nó. Bạn cũng sẽ phải điều chỉnh giải pháp để tải xuống nhiều tệp.


4

Phiên bản jQuery của iframe trả lời:

function download(files) {
    $.each(files, function(key, value) {
        $('<iframe></iframe>')
            .hide()
            .attr('src', value)
            .appendTo($('body'))
            .load(function() {
                var that = this;
                setTimeout(function() {
                    $(that).remove();
                }, 100);
            });
    });
}

Mỗi người đang tìm kiếm một mảng. Điều này sẽ hoạt động: download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']);Tuy nhiên, điều này không hoạt động để tải xuống tệp hình ảnh.
tehlivi

3

Giải pháp góc cạnh:

HTML

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


}]);

ví dụ làm việc: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview


1

Để cải thiện câu trả lời của @Dmitry Nogin: điều này đã hoạt động trong trường hợp của tôi.

Tuy nhiên, nó không được thử nghiệm, vì tôi không chắc hộp thoại tệp hoạt động như thế nào trên các kết hợp hệ điều hành / trình duyệt khác nhau. (Như vậy wiki cộng đồng.)

<script>
$('#download').click(function () {
    download(['http://www.arcelormittal.com/ostrava/doc/cv.doc', 
              'http://www.arcelormittal.com/ostrava/doc/cv.doc']);
});

var download = function (ar) {
    var prevfun=function(){};
    ar.forEach(function(address) {  
        var pp=prevfun;
        var fun=function() {
                var iframe = $('<iframe style="visibility: collapse;"></iframe>');
                $('body').append(iframe);
                var content = iframe[0].contentDocument;
                var form = '<form action="' + address + '" method="POST"></form>';
                content.write(form);
                $(form).submit();
                setTimeout(function() {    
                    $(document).one('mousemove', function() { //<--slightly hacky!
                        iframe.remove();
                        pp();
                    });
                },2000);
        }
        prevfun=fun; 
      });
      prevfun();   
}
</script>

1

Tính năng này hoạt động trên tất cả các trình duyệt (IE11, firefox, Edge, Chrome và Chrome Mobile) Tài liệu của tôi nằm trong nhiều phần tử được chọn. Các trình duyệt dường như có vấn đề khi bạn cố gắng thực hiện quá nhanh ... Vì vậy, tôi đã sử dụng thời gian chờ.

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

Đây là một giải pháp sử dụng các lời hứa:

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

1

Cho đến nay, giải pháp dễ dàng nhất (ít nhất là trong ubuntu / linux):

  • tạo tệp văn bản với các url của tệp để tải xuống (tức là tệp.txt)
  • đặt 'file.txt' vào thư mục mà bạn muốn tải xuống các tệp
  • mở terminal trong thư mục tải xuống từ lin trước
  • tải xuống các tệp bằng lệnh 'wget -i file.txt'

Hoạt động như một sự quyến rũ.


Tôi không hiểu tại sao điều này lại bị phản đối. Điều này hoạt động hoàn hảo, cảm ơn bạn nhiều.
Martin Fürholz

1

Để giải quyết vấn đề này, tôi đã tạo một thư viện JS để truyền trực tiếp nhiều tệp vào một tệp zip ở phía máy khách. Tính năng độc đáo chính là nó không có giới hạn kích thước từ bộ nhớ (mọi thứ đều được truyền trực tuyến) cũng như định dạng zip (nó sử dụng zip64 nếu nội dung nhiều hơn 4GB).

Vì nó không nén, nó cũng rất hiệu quả.

Tìm "downzip" nó trên npm hoặc github !


1

Tập lệnh sau đã thực hiện công việc này một cách duyên dáng.

var urls = [
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg'
];

function downloadAll(urls) {


  for (var i = 0; i < urls.length; i++) {
    forceDownload(urls[i], urls[i].substring(urls[i].lastIndexOf('/')+1,urls[i].length))
  }
}
function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

0

Tôi đang tìm giải pháp để thực hiện việc này, nhưng việc giải nén các tệp trong javascript không được sạch như tôi muốn. Tôi quyết định đóng gói các tệp thành một tệp SVG duy nhất.

Nếu bạn có các tệp được lưu trữ trên máy chủ (tôi thì không), bạn có thể chỉ cần đặt href trong SVG.

Trong trường hợp của tôi, tôi sẽ chuyển đổi các tệp thành base64 và nhúng chúng vào SVG.

Chỉnh sửa: SVG hoạt động rất tốt. Nếu bạn chỉ tải xuống các tệp, ZIP có thể tốt hơn. Nếu bạn định hiển thị các tệp, thì SVG có vẻ vượt trội hơn.


0

Khi sử dụng các thành phần Ajax, có thể bắt đầu tải xuống nhiều lần. Vì vậy, bạn phải sử dụng https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow

Thêm một phiên bản AJAXDownload vào Trang của bạn hoặc bất cứ thứ gì. Tạo một AjaxButton và ghi đè onSubmit. Tạo một AbstractAjaxTimerBehavior và bắt đầu tải xuống.

        button = new AjaxButton("button2") {

        private static final long serialVersionUID = 1L;

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form<?> form)
        {
            MultiSitePage.this.info(this);
            target.add(form);

            form.add(new AbstractAjaxTimerBehavior(Duration.milliseconds(1)) {

                @Override
                protected void onTimer(AjaxRequestTarget target) {
                    download.initiate(target);
                }

            });     
        }

Chúc bạn tải xuống vui vẻ!


javascrpt?!?!?!?!?!
bluejayke

0

Mã dưới đây 100% hoạt động.

Bước 1 : Dán dưới mã trong index.html tập tin

<!DOCTYPE html>
<html ng-app="ang">

<head>
    <title>Angular Test</title>
    <meta charset="utf-8" />
</head>

<body>
    <div ng-controller="myController">
        <button ng-click="files()">Download All</button>
    </div>

    <script src="angular.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

Bước 2 : Dán dưới mã trong index.js tập tin

"use strict";

var x = angular.module('ang', []);

    x.controller('myController', function ($scope, $http) {
        var arr = [
            {file:"http://localhost/angularProject/w3logo.jpg", fileName: "imageone"},
            {file:"http://localhost/angularProject/cv.doc", fileName: "imagetwo"},
            {file:"http://localhost/angularProject/91.png", fileName: "imagethree"}
        ];

        $scope.files = function() {
            angular.forEach(arr, function(val, key) {
                $http.get(val.file)
                .then(function onSuccess(response) {
                    console.log('res', response);
                    var link = document.createElement('a');
                    link.setAttribute('download', val.fileName);
                    link.setAttribute('href', val.file);
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click(); 
                    document.body.removeChild(link);
                })
                .catch(function onError(error) {
                    console.log('error', error);
                })
            })
        };
    });

LƯU Ý : Đảm bảo rằng cả ba tệp sẽ tải xuống sẽ được đặt trong cùng một thư mục cùng với các tệp angleProject / index.html hoặc angleProject / index.js .


bạn có rilly nhào Ayng [ngự khí nhân cuối cùng] ular cho thuis không / ???
bluejayke

0

Lấy danh sách url bằng lệnh gọi ajax và sau đó sử dụng plugin jquery để tải xuống nhiều tệp song song.

  $.ajax({
        type: "POST",
        url: URL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        async: true,
        cache: false,
        beforeSend: function () {
            blockUI("body");
        },
        complete: function () { unblockUI("body"); },
        success: function (data) {
           //here data --> contains list of urls with comma seperated
            var listUrls= data.DownloadFilePaths.split(',');
            listUrls.forEach(function (url) {
                $.fileDownload(url);
            });
            return false; 
        },
        error: function (result) {
            $('#mdlNoDataExist').modal('show');
        }

    });

0

Đây là cách tôi làm điều đó. Tôi mở nhiều tệp ZIP nhưng cũng có loại dữ liệu khác (tôi xuất projet ở dạng PDF và cùng lúc nhiều tệp ZIP với tài liệu).

Tôi chỉ sao chép phần trước của mã của mình. Cuộc gọi từ một nút trong danh sách:

$url_pdf = "pdf.php?id=7";
$url_zip1 = "zip.php?id=8";
$url_zip2 = "zip.php?id=9";
$btn_pdf = "<a href=\"javascript:;\" onClick=\"return open_multiple('','".$url_pdf.",".$url_zip1.",".$url_zip2."');\">\n";
$btn_pdf .= "<img src=\"../../../images/icones/pdf.png\" alt=\"Ver\">\n";
$btn_pdf .= "</a>\n"

Vì vậy, một cuộc gọi cơ bản đến một quy trình JS (Quy tắc Vanilla!). đây là quy trình JS:

 function open_multiple(base,url_publication)
 {
     // URL of pages to open are coma separated
     tab_url = url_publication.split(",");
     var nb = tab_url.length;
     // Loop against URL    
     for (var x = 0; x < nb; x++)
     {
        window.open(tab_url[x]);
      }

     // Base is the dest of the caller page as
     // sometimes I need it to refresh
     if (base != "")
      {
        window.location.href  = base;
      }
   }

Mẹo là KHÔNG cung cấp liên kết trực tiếp của tệp ZIP mà phải gửi nó đến trình duyệt. Như thế này:

  $type_mime = "application/zip, application/x-compressed-zip";
 $the_mime = "Content-type: ".$type_mime;
 $tdoc_size = filesize ($the_zip_path);
 $the_length = "Content-Length: " . $tdoc_size;
 $tdoc_nom = "Pesquisa.zip";
 $the_content_disposition = "Content-Disposition: attachment; filename=\"".$tdoc_nom."\"";

  header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");   // Date in the past
  header($the_mime);
  header($the_length);
  header($the_content_disposition);

  // Clear the cache or some "sh..." will be added
  ob_clean();
  flush();
  readfile($the_zip_path);
  exit();

-1
           <p class="style1">



<a onclick="downloadAll(window.links)">Balance Sheet Year 2014-2015</a>

</p>

<script>
 var links = [
  'pdfs/IMG.pdf',
  'pdfs/IMG_0001.pdf',
 'pdfs/IMG_0002.pdf',
 'pdfs/IMG_0003.pdf',
'pdfs/IMG_0004.pdf',
'pdfs/IMG_0005.pdf',
 'pdfs/IMG_0006.pdf'

];

function downloadAll(urls) {
  var link = document.createElement('a');

  link.setAttribute('download','Balance Sheet Year 2014-2015');
  link.style.display = 'none';

  document.body.appendChild(link);

  for (var i = 0; i < urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}
</script>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.