jquery - 不使用 Zip 文件下载多个文件

Question

我有一个通用处理程序 Document.ashx，它通过从查询字符串中读取信息来动态创建 Word 文档，如下所示 Document.ashx?clientid=123&documentid=10 和它工作完美。

我需要创建一个带有复选框列表和全部下载按钮的界面。到目前为止，我想到的最好的想法是使用类似的方法来调用处理程序。

$("body").append("<iframe src='Document.ashx?clientid=123&documentid=10'></iframe>
                  <iframe src='Document.ashx?clientid=123&documentid=11'></iframe>")

Chrome 和 Firefox 按预期处理此问题，但 IE9 会提示用户询问是否要保存第一个文件，但会忽略后续文件。

如何开始从客户端下载多个文件？

这是针对 Intranet 站点的，因此文件总是在约 1 秒内生成，用户一次会选择约 3-5 个文档。绝大多数用户使用的是IE9。我可以告诉每个人他们必须使用 Firefox 或 Chrome，但我宁愿找到一个适用于所有现代浏览器的解决方案。

我不想在服务器端创建 zip 文件，因为这样他们总是必须先解压缩它(这对某些人来说太难理解)并且会减慢他们的速度。

Answer 1

所以这可能有点过头了，但在 IE9、FF7 和 Chrome 16 中有效:

灵感来自this SO post

jQuery 插件:

• json2.js
• $.cookie()
• $.bbq()

处理程序中的 C#:

public void ProcessRequest (HttpContext context) {

    ...

    if (!string.IsNullOrEmpty(context.Request.QueryString["downloadid"])) 
          Response.Cookies[context.Request.QueryString["downloadid"]].Value = "complete";
}

Javascript/jQuery:

function downloadFile(url, downloadid) {
    //set a cookie with a unique download id
    $.cookie(downloadid, 'pending', { path: '/' });

    //create a new url
    var newurl = $.param.querystring(url, { downloadid: downloadid });

    //append an iframe with new url
    $("body").append("<iframe style='height:0;width:0;' data-downloadid='" + downloadid + "' src='" + newurl + "'></iframe>");
}

function downloadComplete(downloadid) {
    //check if download is pending
    return $.cookie(downloadid) == "complete";
}

function downloadManager(arrDownloads) {
    //loop through download items backwards
    var allComplete = false;
    for (var i = arrDownloads.length; i > 0; i--) {
        if (downloadComplete(arrDownloads[i - 1].downloadid)) {
            //download the next one if it exists
            if (i == arrDownloads.length) {
                allComplete = true;
            }
            else {
                downloadFile(arrDownloads[i].url, arrDownloads[i].downloadid);
            }
            //stop checking for completed downloads
            break;
        }
    }

    if (allComplete) {
        //remove cookies
        for (var i = arrDownloads.length; i > 0; i--) {
            $.cookie(arrDownloads[i - 1].downloadid, null, { path: '/' });
        }

        //remove iframes
        $("iframe[data-downloadid]").remove();
    }
    else {
        setTimeout("downloadManager(" + JSON.stringify(arrDownloads) + ");", 500);
    }
}

function downloadFiles(arrurls) {
    var arrDownloads = [];

    for (var i = 0; i < arrurls.length; i++) {
        var item = new Object();
        item.url = arrurls[i];
        item.downloadid = newGuid();
        arrDownloads.push(item);
    }

    //start the first download
    downloadFile(arrDownloads[0].url, arrDownloads[0].downloadid);
    //initiate the manager
    downloadManager(arrDownloads);
}

$(function () {
    var arrurls = [];
    arrurls.push("Document.ashx?clientid=123&documentid=10");
    arrurls.push("Document.ashx?clientid=123&documentid=11");
    arrurls.push("Document.ashx?clientid=123&documentid=12");
    arrurls.push("Document.ashx?clientid=123&documentid=13");
    arrurls.push("Document.ashx?clientid=123&documentid=14");
    downloadFiles(arrurls);
});