Laden Sie mehrere Dateien mit einer einzigen Aktion herunter

109

Ich bin mir nicht sicher, ob dies mit Standard-Webtechnologien möglich ist.

Ich möchte, dass der Benutzer mehrere Dateien in einer einzigen Aktion herunterladen kann. Das heißt, Sie aktivieren die Kontrollkästchen neben den Dateien und rufen dann alle Dateien ab, die aktiviert wurden.

Ist es möglich - wenn ja, welche Grundstrategie empfehlen Sie? Ich weiß, dass ich mithilfe der Kometentechnologie serverseitige Ereignisse erstellen kann, die eine HttpResponse auslösen, aber ich hoffe, dass es einen einfacheren Weg gibt.

http web-applications download Ankur
quelle

60

HTTP unterstützt nicht mehr als einen Dateidownload gleichzeitig.

Es gibt zwei Lösungen:

Öffnen Sie x Fenster, um das Herunterladen der Dateien zu starten (dies würde mit JavaScript erfolgen).
bevorzugte Lösung Erstellen Sie ein Skript, um die Dateien zu komprimieren

Jacob Relkin
quelle

39

Warum ist eine Zip-Datei die bevorzugte Lösung? Es wird ein zusätzlicher Schritt für den Benutzer erstellt (Entpacken).

Speedplane

7

Diese Seite enthält Javascript, das eine ZIP-Datei erstellt. Schauen Sie sich die Seite an, auf der es ein großartiges Beispiel gibt. stuk.github.io/jszip

Netsi1964

Eine dritte Möglichkeit besteht darin, die Dateien in eine SVG-Datei zu kapseln. Wenn die Dateien im Browser angezeigt werden, scheint die SVG der beste Weg zu sein.

VectorVortec

4

HTTP selbst unterstützt das mehrteilige Nachrichtenformat. Browser analysieren jedoch keine tragbaren mehrteiligen Antworten von der Serverseite, aber technisch gesehen ist dies nicht schwierig.

CMCDragonkai

2

Dies kann eine hervorragende Lösung mit 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>

Erweitern Sie das Snippet

Matěj Pokorný
quelle

3

Ich arbeite mit vielen Dateitypen, einschließlich Bildern, und dies funktionierte am besten für mich. Allerdings link.setAttribute('download', null);umbenannt alle meine Dateien auf null.

Tehlivi

7

Es funktioniert nicht in IE 11, es lädt nur die .jar (letztes Element in der Liste) herunter. Es war die perfekte Lösung :(

Immutable Brick

1

@AngeloMoreira Ja, zumindest funktioniert es in Edge. Wenn Sie mehrere Dateien in IE auf MS - Websites versuchen , das Herunterladen, zum Beispiel , laichen sie mehr Pop-up - Fenster, so dass ich für IE beste Lösung immer noch der Meinung von ist über Dmitry Nogin .

Matěj Pokorný

1

@tehlivi - Ich habe das gleiche gefunden. Fügen Sie das link.setAttribute('download',filename)Innere der Schleife hinzu. Auf diese Weise können Sie die Dateien beliebig benennen. Ich glaube auch, dass es nur der Dateiname sein muss, der die URL nicht enthält. Am Ende habe ich zwei Arrays gesendet: eines mit der vollständigen URL und eines nur mit dem Dateinamen.

PhilMDev

6

Es funktioniert nicht richtig in Chrome v75, Windows 10: Die einzige Datei, die heruntergeladen wird, ist Minecraft.jar.

andreivictor

54

Sie können einen temporären Satz versteckter Iframes erstellen, den Download per GET oder POST in diesen initiieren, auf den Start der Downloads warten und Iframes entfernen:

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

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

Dmitry Nogin
quelle

Super, aber aus bestimmten Gründen werden die Dateien nicht heruntergeladen. Für mich scheint der Grund, dass die Seite nach dem Ausführen des Skripts neu geladen wird, der Grund dafür zu sein, dass Dateien nicht heruntergeladen werden. Irgendeine Ahnung, was ich falsch mache?

Chirag Mehta

Ich habe mehrere Probleme mit dieser Lösung. Im IE wurde mir der Zugriff verweigert, da mein übergeordnetes Fenster die document.domain geändert hat. Es gibt verschiedene Beiträge, um dies zu beheben, aber alle fühlen sich hackig. In Chrome erhält der Benutzer eine Warnmeldung, dass die Website versucht, mehrere Dateien herunterzuladen (aber zumindest funktioniert dies). In Firefox erhalte ich eine andere Download-Box, aber wenn ich auf Speichern klicke, wird der Dialog zum Speichern der Datei nicht angezeigt ...

Melanie

Dies hat bei mir nicht funktioniert, da der Dateidialog die anderen Speicherdialoge "blockiert". Was ich getan habe, war etwas Hacky - die Mausbewegungsaktion wird erst registriert, nachdem der Dateidialog verschwunden ist, also habe ich das verwendet - aber es wurde nicht getestet. Ich werde es als weitere Antwort hinzufügen.

Karel Bílek

2

Funktioniert das in IE10? Ich bekomme: Objekt unterstützt keine Eigenschaft oder Methode 'schreiben'

Hoppe

Warum ist die zurückgegebene Funktion (Schließung?) aktiviert setTimeout()?

Robisrob

34

Diese Lösung funktioniert browserübergreifend und löst keine Warnungen aus. Anstatt eine zu erstelleniframe , wir hier einen Link für jede Datei. Dadurch wird verhindert, dass Warnmeldungen angezeigt werden.

Um den Schleifenteil zu behandeln, verwenden wir setTimeout, was notwendig ist, damit er im IE funktioniert.

/**
 * 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>

Erweitern Sie das Snippet

Geschwindigkeitsflugzeug
quelle

Dies ist die einzige hier, die für mich funktioniert hat, da ich IE unterstützen muss. Danke dir.

Øystein Amundsen

1

Diese Antwort ist golden. Nur einer, der in allen Browsern ohne Warnmeldung funktioniert. Speziell IE.

Mukul Goel

Ich arbeite nicht in Chrome OSX und fordere mich auf, mehrere Downloads zuzulassen. Selbst wenn dies der Fall ist, wird nur die erste Datei heruntergeladen, und ich hörte einen Piepton, der der Anzahl der verbleibenden Dateien entspricht

Allan Raquin

2

Button macht nichts Google Chrome Version 76.0.3809.100 (Official Build) (64-bit).

1934286

1

Schaltfläche funktioniert nicht im Stapelüberlauf Code-Snippet ausführen. Browser Crome @speedplane

mb

5

Am einfachsten wäre es, mehrere Dateien zu einer ZIP-Datei zusammenzufassen.

Ich nehme an, Sie könnten mehrere Dateidownloads mithilfe einer Reihe von Iframes oder Popups initiieren, aber unter dem Gesichtspunkt der Benutzerfreundlichkeit ist eine ZIP-Datei immer noch besser. Wer möchte durch zehn "Speichern unter" -Dialoge klicken, die der Browser aufruft?

Thilo
quelle

3

Mir ist klar, dass Ihre Antwort aus dem Jahr 2010 stammt, aber heutzutage surfen viele Benutzer mit Smartphones, von denen einige standardmäßig keine Reißverschlüsse öffnen können (ein Freund sagt mir, dass sein Samsung S4 Active keine Reißverschlüsse öffnen kann).

Hydraxan14

4

Ich bin damit einverstanden, dass eine Zip-Datei eine bessere Lösung ist ... Aber wenn Sie mehrere Dateien pushen müssen, ist hier die Lösung, die ich mir ausgedacht habe. Es funktioniert in IE 9 und höher (möglicherweise auch in einer niedrigeren Version - ich habe es nicht getestet), Firefox, Safari und Chrome. Chrome zeigt dem Benutzer eine Nachricht an, um seine Zustimmung zum Herunterladen mehrerer Dateien zu erhalten, wenn Ihre Website diese zum ersten Mal verwendet.

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

Der einzige Nebeneffekt dieser Technik ist, dass der Benutzer eine Verzögerung zwischen dem Senden und dem angezeigten Download-Dialog sieht. Um diesen Effekt zu minimieren, schlage ich vor, dass Sie die hier beschriebene Technik verwenden und bei dieser Frage feststellen, wann der Browser einen Dateidownload erhält , der darin besteht, ein Cookie mit Ihrer Datei zu setzen, um zu wissen, dass der Download gestartet wurde. Sie müssen auf der Clientseite nach diesem Cookie suchen und es auf der Serverseite senden. Vergessen Sie nicht, den richtigen Pfad für Ihr Cookie festzulegen, da Sie ihn sonst möglicherweise nicht sehen. Sie müssen die Lösung auch für den Download mehrerer Dateien anpassen.

Melanie
quelle

4

Eine jQuery-Version des Iframes antwortet:

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

Yirmiyahu Fischer
quelle

Jeder sucht nach einem Array. Dies funktioniert: download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']);Dies funktioniert jedoch nicht zum Herunterladen von Bilddateien.

Tehlivi

3

Winkellösung:

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


}]);

Arbeitsbeispiel: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview

suresh
quelle

1

Um die Antwort von @Dmitry Nogin zu verbessern: Dies hat in meinem Fall funktioniert.

Es wird jedoch nicht getestet, da ich nicht sicher bin, wie der Dateidialog unter verschiedenen Betriebssystem- / Browserkombinationen funktioniert. (Also Community-Wiki.)

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

Karel Bílek
quelle

1

Dies funktioniert in allen Browsern (IE11, Firefox, Edge, Chrome und Chrome Mobile). Meine Dokumente befinden sich in mehreren ausgewählten Elementen. Die Browser scheinen Probleme zu haben, wenn Sie versuchen, es zu schnell zu machen ... Also habe ich eine Zeitüberschreitung verwendet.

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

Dies ist eine Lösung, die Versprechen verwendet:

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

Zach Maler
quelle

1

Mit Abstand die einfachste Lösung (zumindest unter Ubuntu / Linux):

Erstellen Sie eine Textdatei mit den URLs der herunterzuladenden Dateien (dh file.txt).
Legen Sie die Datei 'file.txt' in dem Verzeichnis ab, in das Sie die Dateien herunterladen möchten
Öffnen Sie das Terminal im Download-Verzeichnis der vorherigen Zeile
Laden Sie die Dateien mit dem Befehl 'wget -i file.txt' herunter.

Klappt wunderbar.

Martijn
quelle

Ich verstehe nicht, warum dies abgelehnt wird. Das funktioniert perfekt, vielen Dank.

Martin Fürholz

1

Um dies zu lösen, habe ich eine JS-Bibliothek erstellt, um mehrere Dateien direkt in eine Zip-Datei auf der Clientseite zu streamen. Das wichtigste einzigartige Merkmal ist, dass es keine Größenbeschränkungen aus dem Speicher (alles wird gestreamt) oder dem Zip-Format gibt (es verwendet zip64, wenn der Inhalt mehr als 4 GB beträgt).

Da es keine Komprimierung durchführt, ist es auch sehr performant.

Finde es auf npm oder github "downzip" !

DebboR
quelle

1

Das folgende Skript hat diesen Job ordnungsgemäß ausgeführt.

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

Shyam Narayan
quelle

0

Ich suche nach einer Lösung, um dies zu tun, aber das Entpacken der Dateien in Javascript war nicht so sauber, wie ich wollte. Ich habe beschlossen, die Dateien in eine einzige SVG-Datei zu kapseln.

Wenn Sie die Dateien auf dem Server gespeichert haben (ich nicht), können Sie einfach die href in der SVG einstellen.

In meinem Fall werde ich die Dateien in base64 konvertieren und sie in die SVG einbetten.

Edit: Die SVG hat sehr gut funktioniert. Wenn Sie nur die Dateien herunterladen möchten, ist ZIP möglicherweise besser. Wenn Sie die Dateien anzeigen möchten, scheint SVG überlegen zu sein.

VectorVortec
quelle

0

Bei Verwendung von Ajax-Komponenten können mehrere Downloads gestartet werden. Daher müssen Sie https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow verwenden

Fügen Sie Ihrer Seite eine Instanz von AJAXDownload hinzu oder was auch immer. Erstellen Sie einen AjaxButton und überschreiben Sie onSubmit. Erstellen Sie ein AbstractAjaxTimerBehavior und starten Sie den Download.

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

            });     
        }

Viel Spaß beim Herunterladen!

kleenxcoder
quelle

javascrpt?!?!?!?!?!

Bluejayke

0

Unter Code 100% funktioniert.

Schritt 1 : Fügen Sie den folgenden Code in die Datei index.html ein

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

Schritt 2 : Fügen Sie den folgenden Code in die Datei index.js ein

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

HINWEIS : Stellen Sie sicher, dass alle drei Dateien, die heruntergeladen werden sollen, zusammen mit den Dateien angularProject / index.html oder angularProject / index.js in demselben Ordner abgelegt werden.

Solanki ...
quelle

knetest du ayng [den letzten airbender] ular für thuis / ???

Bluejayke

0

Abrufen der URL-Liste mit Ajax-Aufruf und anschließendes Herunterladen mehrerer Dateien mithilfe des JQuery-Plugins .

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

    });

Ali
quelle

0

So mache ich das. Ich öffne mehrere ZIPs, aber auch andere Arten von Daten (ich exportiere Projet in PDF und gleichzeitig viele ZIPs mit Dokument).

Ich kopiere nur einen Teil meines Codes. Der Anruf von einer Schaltfläche in einer Liste:

$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"

Also ein grundlegender Aufruf einer JS-Routine (Vanilla-Regeln!). Hier ist die JS-Routine:

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

Der Trick besteht darin, den direkten Link der ZIP-Datei NICHT anzugeben, sondern an den Browser zu senden. So was:

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

Peter
quelle

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

quelle

Laden Sie mehrere Dateien mit einer einzigen Aktion herunter

Antworten: