当用户触发文件的生成时，您可以简单地为“下载”分配一个唯一的ID，并将用户发送到每隔几秒钟刷新(或使用AJAX检查)的页面。一旦文件完成，将其保存在相同的唯一ID和…

如果文件已经准备好，请进行下载。 如果文件尚未准备好，请显示进度。

然后你可以跳过整个iframe/waiting/browserwindow的混乱，而有一个真正优雅的解决方案。

我写了一个简单的JavaScript类，实现了一种类似于bulltorious回答中描述的技术。我希望它能对在座的人有用。

GitHub项目被称为response-monitor.js。

默认情况下，它使用spin.js作为等待指示器，但它也为自定义指示器的实现提供了一组回调。

jQuery是支持的，但不是必需的。

显著的特征

简单的集成 没有依赖关系 jQuery插件(可选) js集成(可选) 用于监视事件的可配置回调 同时处理多个请求 服务器端错误检测 超时检测 跨浏览器

示例使用

HTML

<!-- The response monitor implementation -->
<script src="response-monitor.js"></script>

<!-- Optional jQuery plug-in -->
<script src="response-monitor.jquery.js"></script>

<a class="my_anchors" href="/report?criteria1=a&criteria2=b#30">Link 1 (Timeout: 30s)</a>
<a class="my_anchors" href="/report?criteria1=b&criteria2=d#10">Link 2 (Timeout: 10s)</a>

<form id="my_form" method="POST">
    <input type="text" name="criteria1">
    <input type="text" name="criteria2">
    <input type="submit" value="Download Report">
</form>

客户端(纯JavaScript)

// Registering multiple anchors at once
var my_anchors = document.getElementsByClassName('my_anchors');
ResponseMonitor.register(my_anchors); // Clicking on the links initiates monitoring

// Registering a single form
var my_form = document.getElementById('my_form');
ResponseMonitor.register(my_form); // The submit event will be intercepted and monitored

客户端(jQuery)

$('.my_anchors').ResponseMonitor();
$('#my_form').ResponseMonitor({timeout: 20});

带有回调函数的客户端

// When options are defined, the default spin.js integration is bypassed
var options = {
    onRequest: function(token) {
        $('#cookie').html(token);
        $('#outcome').html('');
        $('#duration').html('');
    },
    onMonitor: function(countdown) {
        $('#duration').html(countdown);
    },
    onResponse: function(status) {
        $('#outcome').html(status==1 ? 'success' : 'failure');
    },
    onTimeout: function() {
        $('#outcome').html('timeout');
    }
};

// Monitor all anchors in the document
$('a').ResponseMonitor(options);

服务器(PHP)

$cookiePrefix = 'response-monitor'; // Must match the one set on the client options
$tokenValue = $_GET[$cookiePrefix];
$cookieName = $cookiePrefix.'_'.$tokenValue; // Example: response-monitor_1419642741528

// This value is passed to the client through the ResponseMonitor.onResponse callback
$cookieValue = 1; // For example, "1" can interpret as success and "0" as failure

setcookie(
    $cookieName,
    $cookieValue,
    time() + 300,          // Expire in 5 minutes
    "/",
    $_SERVER["HTTP_HOST"],
    true,
    false
);

header('Content-Type: text/plain');
header("Content-Disposition: attachment; filename=\"Response.txt\"");

sleep(5); // Simulate whatever delays the response
print_r($_REQUEST); // Dump the request in the text file

有关更多示例，请检查存储库中的examples文件夹。

如果您正在流式处理动态生成的文件，并且还实现了实时的服务器到客户端消息库，那么您可以非常容易地提醒客户端。

The server-to-client messaging library I like and recommend is Socket.io (via Node.js). After your server script is done generating the file that is being streamed for download your last line in that script can emit a message to Socket.io which sends a notification to the client. On the client, Socket.io listens for incoming messages emitted from the server and allows you to act on them. The benefit of using this method over others is that you are able to detect a "true" finish event after the streaming is done.

例如，您可以在单击下载链接后显示繁忙指示器，流式传输文件，向Socket发出消息。在您的流脚本的最后一行中，从服务器中输入io，在客户端侦听通知，接收通知并通过隐藏busy指示器更新您的UI。

我知道大多数读到这个问题答案的人可能没有这种类型的设置，但我已经在我自己的项目中使用了这种确切的解决方案，而且效果非常好。

套接字。IO非常容易安装和使用。查看更多信息:http://socket.io/

您可以依赖浏览器的缓存，并在文件加载到缓存时触发同一文件的第二次下载。

$('#link').click(function(e) {
    e.preventDefault();

    var url = $(this).attr('href');
    var request = new XMLHttpRequest();
    request.responseType = "blob";
    request.open("GET", url);

    var self = this;
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            var file = $(self).data('file');
            var anchor = document.createElement('a');
            anchor.download = file;
            console.log(file);
            console.log(request);
            anchor.href = window.URL.createObjectURL(request.response);
            anchor.click();
            console.log('Completed. Download window popped up.');
        }
    };
    request.send();
});

一个非常简单(蹩脚)的一行解决方案是使用window.onblur()事件关闭加载对话框。当然，如果它花了太长时间，用户决定做其他事情(如阅读电子邮件)，加载对话框将关闭。

如果您下载了一个文件，该文件是保存的，而不是在文档中，则无法确定下载何时完成，因为它不在当前文档的范围内，而是浏览器中的一个单独进程。