Unduh banyak file dengan satu tindakan

109

Saya tidak yakin apakah ini mungkin menggunakan teknologi web standar.

Saya ingin pengguna dapat mengunduh banyak file dalam satu tindakan. Yaitu klik kotak centang di sebelah file, dan kemudian dapatkan semua file yang diperiksa.

Apakah mungkin - jika demikian strategi dasar apa yang Anda rekomendasikan. Saya tahu saya dapat menggunakan teknologi komet untuk membuat peristiwa sisi server yang memicu HttpResponse tetapi saya berharap ada cara yang lebih sederhana.

http web-applications download Ankur
sumber

60

HTTP tidak mendukung lebih dari satu unduhan file sekaligus.

Ada dua solusi:

Buka sejumlah x jendela untuk memulai pengunduhan file (ini akan dilakukan dengan JavaScript)
solusi yang lebih disukai membuat skrip untuk zip file

Jacob Relkin
sumber

39

Mengapa file zip adalah solusi yang disukai ? Ini menciptakan langkah ekstra bagi pengguna (unzip).

speedplane

7

Halaman ini berisi javascript yang membuat file ZIP. Lihatlah halaman itu memiliki contoh yang bagus. stuk.github.io/jszip

Netsi1964

Cara ketiga adalah merangkum file ke dalam file SVG. Jika file ditampilkan di browser, SVG tampaknya menjadi cara terbaik.

VectorVortec

4

HTTP sendiri mendukung format pesan multi bagian. Tetapi browser tidak secara mudah mengurai respons multi bagian dari sisi server, tetapi secara teknis tidak ada yang sulit dengan melakukan ini.

CMCDragonkai

2

Ini bisa menjadi solusi yang sangat baik dengan 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>

Luaskan cuplikan

Matěj Pokorný
sumber

3

Saya bekerja dengan banyak jenis file, termasuk gambar, dan ini bekerja paling baik untuk saya. Namun, link.setAttribute('download', null);mengganti nama semua file saya menjadi null.

tehlivi

7

Itu tidak berfungsi di IE 11, itu hanya mengunduh .jar (item terakhir dalam daftar) itu adalah solusi sempurna :(

Bata Abadi

1

@AngeloMoreira Ya, setidaknya ini berfungsi di Edge. Jika Anda mencoba mengunduh banyak file di IE di situs MS, misalnya , mereka menelurkan beberapa jendela pop-up, jadi saya pikir solusi terbaik untuk IE masih dari Dmitry Nogin di atas .

Matěj Pokorný

1

@ tehlivi - Saya menemukan hal yang sama. Tambahkan bagian link.setAttribute('download',filename)dalam lingkaran. Ini memungkinkan Anda memberi nama file apa pun yang Anda inginkan. Juga, saya yakin itu harus nama file saja tidak termasuk URL. Saya akhirnya mengirim dua array: satu dengan URL lengkap dan satu lagi hanya dengan nama file.

PhilMDev

7

Itu tidak berfungsi dengan baik di Chrome v75, Windows 10: Satu-satunya file yang diunduh adalah Minecraft.jar.

andreivictor

54

Anda dapat membuat satu set iframe tersembunyi untuk sementara, memulai unduhan dengan GET atau POST di dalamnya, tunggu unduhan dimulai dan hapus 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>

Atau, tanpa 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
sumber

mengagumkan, tetapi karena beberapa alasan file tidak diunduh. Bagi saya alasan tampaknya halaman dimuat ulang setelah skrip dijalankan, tampaknya menjadi alasan file tidak diunduh. Ada petunjuk tentang kesalahan apa yang saya lakukan?

Chirag Mehta

Saya punya banyak masalah dengan solusi ini. Di IE karena jendela induk saya telah mengubah document.domain, saya memiliki akses ditolak. Ada berbagai posting tentang memperbaikinya, tetapi semuanya terasa hacky. Di Chrome, pengguna mendapat prompt pesan peringatan yang memberi tahu situs web mencoba untuk mengunduh banyak file (tapi setidaknya berhasil). Di Firefox, saya mendapatkan kotak dowload yang berbeda tetapi ketika saya mengklik Simpan, saya tidak mendapatkan dialog simpan file ...

Melanie

Ini tidak berhasil untuk saya, karena dialog file "memblokir" dialog penyimpanan lainnya untuk muncul. Apa yang saya lakukan adalah sesuatu yang sedikit hacky - tindakan mousemove hanya mendaftar setelah dialog file menghilang, jadi saya menggunakannya - tetapi belum diuji. Saya akan menambahkannya sebagai jawaban lain.

Karel Bílek

2

Apakah ini berfungsi di IE10? Saya mendapatkan: Objek tidak mendukung properti atau metode 'tulis'

Hoppe

mengapa fungsi yang dikembalikan (closure?) aktif setTimeout()?

robisrob

34

Solusi ini berfungsi di semua browser, dan tidak memicu peringatan. Daripada membuat iframe, di sini kami membuat tautan untuk setiap file. Ini mencegah pesan peringatan muncul.

Untuk menangani bagian perulangan, kami menggunakan setTimeout, yang diperlukan agar dapat berfungsi di 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>

Luaskan cuplikan

speedplane
sumber

Ini adalah satu-satunya di sini yang berhasil untuk saya, karena saya harus mendukung IE. Terima kasih.

Øystein Amundsen

1

Jawaban ini emas. Hanya satu yang bekerja di semua browser tanpa pesan peringatan. Khususnya IE. Hal-hal yang brilian

Mukul Goel

Tidak berfungsi di Chrome OSX, ia meminta saya untuk mengizinkan beberapa unduhan tetapi bahkan jika saya melakukannya, hanya file pertama yang diunduh dan saya mendengar sejumlah "bip" sesuai dengan jumlah file yang tersisa untuk diunduh

Allan Raquin

2

Tombol tidak melakukan apa pun Google Chrome Version 76.0.3809.100 (Official Build) (64-bit).

1934286

1

Tombol tidak berfungsi di stack overflow Jalankan cuplikan kode. Browser Crome @speedplane

mb

5

Cara termudah adalah dengan menyajikan beberapa file yang dibundel ke dalam file ZIP.

Saya kira Anda dapat memulai beberapa unduhan file menggunakan banyak iframe atau popup, tetapi dari sudut pandang kegunaan, file ZIP masih lebih baik. Siapa yang ingin mengklik sepuluh dialog "Simpan Sebagai" yang akan ditampilkan browser?

Thilo
sumber

3

Saya menyadari jawaban Anda berasal dari tahun 2010, tetapi banyak pengguna yang menjelajah dengan smartphone saat ini, beberapa di antaranya tidak dapat membuka ritsleting secara default (seorang teman memberi tahu saya bahwa Samsung S4 Active-nya tidak dapat membuka ritsleting).

Hydraxan14

4

Saya setuju bahwa file zip adalah solusi yang lebih rapi ... Tetapi jika Anda harus mendorong banyak file, inilah solusi yang saya buat. Ia bekerja di IE 9 dan lebih tinggi (mungkin versi yang lebih rendah juga - saya belum mengujinya), Firefox, Safari dan Chrome. Chrome akan menampilkan pesan kepada pengguna untuk mendapatkan persetujuannya untuk mengunduh banyak file saat pertama kali situs Anda menggunakannya.

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

Satu-satunya efek samping dari teknik ini, adalah pengguna akan melihat penundaan antara pengiriman dan dialog unduhan ditampilkan. Untuk meminimalkan efek ini, saya sarankan Anda menggunakan teknik yang dijelaskan di sini dan pada pertanyaan ini Deteksi ketika browser menerima unduhan file yang terdiri dari pengaturan cookie dengan file Anda untuk mengetahui bahwa itu telah mulai mengunduh. Anda harus memeriksa cookie ini di sisi klien dan mengirimkannya ke sisi server. Jangan lupa untuk mengatur jalur yang tepat untuk cookie Anda atau Anda mungkin tidak melihatnya. Anda juga harus menyesuaikan solusi untuk unduhan banyak file.

Melanie
sumber

4

Versi jQuery dari iframe menjawab:

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
sumber

Masing-masing mencari array. Ini akan berhasil: download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']);Namun, ini tidak berfungsi untuk mengunduh file gambar.

tehlivi

3

Solusi sudut:

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


}]);

contoh yang berfungsi: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview

suresh
sumber

1

Untuk memperbaiki jawaban @Dmitry Nogin: ini berhasil dalam kasus saya.

Namun, ini belum diuji, karena saya tidak yakin bagaimana dialog file bekerja pada berbagai kombinasi OS / browser. (Jadi wiki komunitas.)

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

1

Ini berfungsi di semua browser (IE11, firefox, Edge, Chrome, dan Chrome Mobile) Dokumen saya ada di beberapa elemen terpilih. Peramban tampaknya mengalami masalah saat Anda mencoba melakukannya terlalu cepat ... Jadi saya menggunakan waktu tunggu.

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

Ini adalah solusi yang menggunakan janji:

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

1

Sejauh ini solusi termudah (setidaknya di ubuntu / linux):

buat file teks dengan url file yang akan diunduh (yaitu file.txt)
letakkan 'file.txt' di direktori tempat Anda ingin mengunduh file
buka terminal di direktori unduhan dari lin sebelumnya
unduh file dengan perintah 'wget -i file.txt'

Bekerja seperti pesona.

Martijn
sumber

Saya tidak mengerti mengapa ini mendapat suara negatif. Ini bekerja dengan sempurna, terima kasih banyak.

Martin Fürholz

1

Untuk mengatasi ini, saya membuat perpustakaan JS untuk mengalirkan banyak file langsung ke zip di sisi klien. Fitur unik utama adalah tidak ada batasan ukuran dari memori (semuanya di-streaming) atau format zip (menggunakan zip64 jika isinya lebih dari 4GB).

Karena tidak melakukan kompresi, ia juga sangat berkinerja.

Temukan "downzip" di npm atau github !

DebboR
sumber

1

Skrip berikut melakukan pekerjaan ini dengan baik.

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
sumber

0

Saya mencari solusi untuk melakukan ini, tetapi membuka ritsleting file di javascript tidak sebersih yang saya suka. Saya memutuskan untuk merangkum file ke dalam satu file SVG.

Jika Anda memiliki file yang disimpan di server (saya tidak), Anda cukup mengatur href di SVG.

Dalam kasus saya, saya akan mengonversi file ke base64 dan menyematkannya di SVG.

Sunting: SVG bekerja dengan sangat baik. Jika Anda hanya akan mengunduh file, ZIP mungkin lebih baik. Jika Anda ingin menampilkan file, maka SVG tampaknya lebih unggul.

VectorVortec
sumber

0

Saat menggunakan komponen Ajax, dimungkinkan untuk memulai banyak unduhan. Oleh karena itu, Anda harus menggunakan https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow

Tambahkan contoh AJAXDownload ke Halaman Anda atau apa pun. Buat AjaxButton dan timpa onSubmit. Buat AbstractAjaxTimerBehavior dan mulai mengunduh.

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

            });     
        }

Selamat mengunduh!

kleenxcoder.dll
sumber

javascrpt?!?!?!?!?!

bluejayke

0

Di bawah kode 100% berfungsi.

Langkah 1 : Tempel kode di bawah ini ke file index.html

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

Langkah 2 : Tempel kode di bawah ini di file index.js

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

CATATAN : Pastikan ketiga file yang akan didownload akan ditempatkan di folder yang sama bersama dengan file angularProject / index.html atau angularProject / index.js .

solanki ...
sumber

do u rilly knead ayng [the last airbender] ular untuk thuis / ???

bluejayke

0

Dapatkan daftar url dengan panggilan ajax dan kemudian gunakan plugin jquery untuk mengunduh beberapa file paralel.

  $.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
sumber

0

Inilah cara saya melakukannya. Saya membuka beberapa ZIP tetapi juga jenis data lain (saya mengekspor projet dalam PDF dan pada saat yang sama banyak ZIP dengan dokumen).

Saya baru saja menyalin bagian dari kode saya. Panggilan dari tombol dalam daftar:

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

Jadi panggilan dasar untuk rutinitas JS (aturan Vanilla!). inilah rutinitas 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;
      }
   }

Triknya adalah TIDAK memberikan tautan langsung dari file ZIP tetapi mengirimkannya ke browser. Seperti ini:

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

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

sumber

Unduh banyak file dengan satu tindakan

Jawaban: