检测浏览器何时接收到文件下载

我有一个允许用户下载动态生成文件的页面。生成它需要很长时间，所以我想显示一个“等待”指示器。问题是，我不知道如何检测浏览器何时接收到文件，以便我可以隐藏指示器。

我请求一个隐藏的表单，它post到服务器，并以一个隐藏的iframe作为其结果的目标。这样我就不会用结果替换整个浏览器窗口。我监听iframe上的“load”事件，希望它在下载完成时触发。

我将文件返回一个“Content-Disposition: attachment”头，这将导致浏览器显示“Save”对话框。但是浏览器不会在iframe中触发“load”事件。

我尝试过的一种方法是采用多部分回答。所以它会发送一个空的HTML文件，以及附加的可下载文件。

例如:

Content-type: multipart/x-mixed-replace;boundary="abcde"

--abcde
Content-type: text/html

--abcde
Content-type: application/vnd.fdf
Content-Disposition: attachment; filename=foo.fdf

file-content
--abcde

这在Firefox中是有效的;它接收空HTML文件，触发“load”事件，然后显示可下载文件的“Save”对话框。但它在ie和Safari浏览器上无法运行;Internet Explorer触发“load”事件，但它不下载文件，而Safari下载文件(带有错误的名称和内容类型)，但不触发“load”事件。

另一种方法可能是调用启动文件创建，轮询服务器直到准备就绪，然后下载已经创建的文件。但我宁愿避免在服务器上创建临时文件。

我该怎么办?

当前回答

基于Elmer的例子，我准备了自己的解决方案。单击具有定义的“download”类的项目后，浏览器窗口中将显示一条自定义消息。我用焦点触发器隐藏了消息。我用焦点触发器隐藏了消息。

JavaScript

$(function(){$('.download').click(function() { ShowDownloadMessage(); }); })

function ShowDownloadMessage()
{
     $('#message-text').text('Your report is creating. Please wait...');
     $('#message').show();
     window.addEventListener('focus', HideDownloadMessage, false);
}

function HideDownloadMessage(){
    window.removeEventListener('focus', HideDownloadMessage, false);                   
    $('#message').hide();
}

HTML

<div id="message" style="display: none">
    <div id="message-screen-mask" class="ui-widget-overlay ui-front"></div>
    <div id="message-text" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable waitmessage">please wait...</div>
</div>

现在你应该实现任何元素来下载:

<a class="download" href="file://www.ocelot.com.pl/prepare-report">Download report</a>

<input class="download" type="submit" value="Download" name="actionType">

每次点击下载后，您将看到消息: 您的报告正在创建中。请稍等…

2014-10-15 13:25:25

其他回答

PrimeFaces也使用cookie投票。

monitorDownload ():

    monitorDownload: function(start, complete, monitorKey) {
        if(this.cookiesEnabled()) {
            if(start) {
                start();
            }

            var cookieName = monitorKey ? 'primefaces.download_' + monitorKey : 'primefaces.download';
            window.downloadMonitor = setInterval(function() {
                var downloadComplete = PrimeFaces.getCookie(cookieName);

                if(downloadComplete === 'true') {
                    if(complete) {
                        complete();
                    }
                    clearInterval(window.downloadMonitor);
                    PrimeFaces.setCookie(cookieName, null);
                }
            }, 1000);
        }
    },

2020-04-06 08:46:36

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

2011-06-04 17:25:51

如果你不想在服务器上生成和存储文件，你是否愿意存储状态，例如文件进行中，文件完成?您的“等待”页面可以轮询服务器以了解文件生成何时完成。您不能确定是浏览器启动了下载，但您有一定的信心。

2009-07-09 21:48:31

根据我的经验，有两种方法可以解决这个问题:

Set a short-lived cookie on the download, and have JavaScript continually check for its existence. Only real issue is getting the cookie lifetime right - too short and the JavaScript can miss it, too long and it might cancel the download screens for other downloads. Using JavaScript to remove the cookie upon discovery usually fixes this. Download the file using fetch/XHR. Not only do you know exactly when the file download finishes, if you use XHR you can use progress events to show a progress bar! Save the resulting blob with msSaveBlob in Internet Explorer or Edge and a download link (like this one) in Firefox and Chrome. The problem with this method is that iOS Safari doesn't seem to handle downloading blobs right - you can convert the blob into a data URL with a FileReader and open that in a new window, but that's opening the file, not saving it.

2019-11-09 01:57:17

当按钮/链接被单击时创建一个iframe，并将其附加到body。

$('<iframe />')
    .attr('src', url)
    .attr('id', 'iframe_download_report')
    .hide()
    .appendTo('body');

创建一个延迟的iframe，下载后删除。

var triggerDelay =   100;
var cleaningDelay =  20000;
var that = this;
setTimeout(function() {
    var frame = $('<iframe style="width:1px; height:1px;" class="multi-download-frame"></iframe>');
    frame.attr('src', url + "?" + "Content-Disposition: attachment ; filename=" + that.model.get('fileName'));
    $(ev.target).after(frame);
    setTimeout(function() {
        frame.remove();
    }, cleaningDelay);
}, triggerDelay);

2014-05-27 09:45:07

检测浏览器何时接收到文件下载

推荐文章

最新文章

标签