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

【问题标题】：How to download multiple files in one shot in IE如何在IE中一次下载多个文件
【发布时间】：2011-07-18 05:45:21
【问题描述】：

我想通过点击 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不能下载多个文件？

【问题讨论】：

标签： javascript internet-explorer

【解决方案1】：

根据设计，非用户启动的文件下载在 IE 中会被阻止。这本质上意味着用户单击一次就不能下载多个文件。

【讨论】：

【解决方案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() 函数，该函数将为每个 URL 调用 downloadFile()，并且之间会有短暂的延迟。延迟似乎是让它工作的关键！

【讨论】：

会不会只有一个打开保存提示。

【解决方案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;
        }
    }
?>

我只在 URI 的“basename”部分使用了 rawurlencode，以确保它是一个有效的编码请求。

【讨论】：

【解决方案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

【讨论】：