Question

我想点击jsp中的按钮下载多个文件。
我在js中使用以下代码来调用一个servlet两次。

var iframe = document.createElement("iframe");
iframe.width = iframe.height = iframe.frameBorder = 0;
iframe.scrolling = "no";
iframe.src = "/xyz.jsp?prodId=p10245";
document.getElementById("iframe_holder").appendChild(iframe);

var iframe2 = document.createElement("iframe");
iframe2.width = iframe2.height = iframe2.frameBorder = 0;
iframe2.scrolling = "no";
iframe2.src = "/xyz.jsp?prodId=p10243";
document.getElementById("iframe_holder").appendChild(iframe2);

在xyz.jsp中，我调用servlet从路径下载文件并在浏览器上发送。
问题是它正在运行safari，firefox但不在IE中我们不能用IE下载多个文件？

Answer 1

按照设计，IE中会阻止非用户启动的文件下载。这固有意味着单个用户点击后不可能下载多个文件。

Answer 2

我使用以下代码在IE和Chrome中下载多个文件

function downloadFile(url)
{
    var iframe = document.createElement("iframe");
    iframe.src = url;
    iframe.style.display = "none";
    document.body.appendChild(iframe);
}

function downloadFiles(urls)
{
    downloadFile(urls[0]);
    if (urls.length > 1)
        window.setTimeout(function () { downloadFiles(urls.slice(1)) }, 1000);
}

您将一组URL传递给downloadFiles（）函数，该函数将为每个函数调用downloadFile（），并且之间有一个短暂的延迟。延迟似乎是让它发挥作用的关键！

Answer 3

我有类似的需求，但也希望在新窗口中进行下载。

我创建了一个用于下载文件列表的js，以及一个用于执行实际文件保存的php。我使用上面作为起点，并从PHP开始（好吧，无法找到原始来源）。我对传递的URI进行编码，因此文件名中的空格不会引起麻烦。

(function () {
"use strict";

var files = [],              // Array of filename strings to download
newWindow,                   // New window to handle the download request
secondsBetweenDownloads;     // Wait time beteen downloads in seconds
//
//  Download a file using a new window given a URI
//
  function downloadFile(uri) {
    if (!newWindow) {
        newWindow = window.open('',
            '',
            'width=1500 height=100');
    }
    if (newWindow) {
        newWindow.location =
            'saveAs.php?' +
            'file_source=' + encodeURI(uri);
        newWindow.document.title = "Download File: " + uri;
    } else {
        console.log("Unable to open new window.  Popups blocked?");
    }
}
//
//  Download all files specified in the files[] array from siteName.
//  Download the file at array position zero, then set a timeout for
//  secondsBetweenDownloads seconds
//
function downloadFiles(siteName) {
    var showTime = new Date();

    console.log(
            showTime.toTimeString().substring(0,8)  +
            " Starting download for: " + files[0]
        );
    // Skip any empty entries, download this file
    if (files[0].length > 0) downloadFile(siteName + files.splice(0, 1));  
    if (files.length > 0) {                     // If more files in array
             window.setTimeout(function () {    // Then setup for another iteration
                downloadFiles(siteName );
            }, secondsBetweenDownloads * 1000); // Delay for n seconds between requests
     } else {
        newWindow.close();                      // Finished, close the download window
     }
}
//
//  Set the web site name and fill the files[] array with the files to download
//  then kick off the download of the files.
//
$(document).ready(function () {
    var
    siteName** = "http://www.mysteryshows.com/thank-you/";
    secondsBetweenDownloads** = 35;   // N seconds delay between requests

    files = [
        "show1.mp3",
        "show2.mp3"
   ];
    downloadFiles(siteName, files);
});
}());

页面的HTML很简单。基本上任何符合语法的页面都可以。

js文件在newWindow.location行中使用的saveAs.php页面只是php。

     <?php
    if (isset($_GET['file_source'])) {
        $fullPath = $_GET['file_source'];
        if($fullPath) {
            $fsize = filesize($fullPath);
            $path_parts = pathinfo($fullPath);
            $ext = strtolower($path_parts["extension"]);
            switch ($ext) {
                case "pdf":
                header("Content-Disposition: attachment;
                filename=\"".$path_parts["basename"]."\""); // use 'attachment' to 
                                                            // force a download
                header("Content-type: application/pdf"); // add here more headers for 
                                                         // diff. extensions
                break;
                default;
                header("Content-type: **application/octet-stream**");
                header("Content-Disposition: 
                   filename=\"".$path_parts["basename"]."\"");
            }
            if($fsize) {//checking if file size exist
                header("Content-length: $fsize");
            }
            $request = $path_parts["dirname"] . '/' .
                rawurlencode($path_parts["basename"]);
            readfile($request);
            exit;
        }
    }
?>

我在＆＃39; basename＆＃39;上使用了rawurlencode。 URI的一部分，以确保它是一个有效的编码请求。

Answer 4

可以通过使用文件源URL创建blob来完成。我已经在IE 11中使用图片和PDF文件对此进行了测试。

                if (navigator.msSaveBlob) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', file_url, true);
                    xhr.responseType = 'blob';

                    xhr.onload = function(e) {
                       if (this.status == 200) {
                           var blob = this.response;
                           navigator.msSaveBlob(blob, file_name);
                       }
                    }

                    xhr.onerror = function(e) {
                        alert("Error " + e.target.status + " occurred while receiving the document.");
                    }

                    xhr.send();
                }

当我遇到这个问题时，我有了这个主意：Getting BLOB data from XHR request

如何在IE中一次下载多个文件

4 个答案: