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

2022-02-21 00:00:00 http mime javascript
我有一个页面,允许用户下载动态生成的文件。它需要很长时间才能生成,因此我想显示等待指示器(&W)。问题是,我无法确定如何检测浏览器何时接收到文件,以便我可以隐藏指示器。

我请求一个隐藏表单,该表单POSTs发送到服务器,并针对隐藏的iFrame获取其结果。这是,所以我不会用结果替换整个浏览器窗口。我侦听IFRAME上的Load&Quot;事件,希望它在下载完成时触发。

我在文件中返回一个";Content-Disposition: attachment";标题,这会使浏览器显示";Save";对话框。但浏览器不会在IFRAME中触发Load&Quot;事件(&Q;Load&Quot;Event)。

我尝试过的一种方法是使用multi-part响应。因此它将发送一个空的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";对话框。但在Internet Explorer和Safari上失败;Internet Explorer会触发&Load";事件,但它不会下载文件,Safari会下载文件(具有错误的名称和内容类型),并且不会触发";Load";事件。

一种不同的方法可能是调用以开始创建文件,轮询服务器直到它准备就绪,然后下载已经创建的文件。但我宁愿避免在服务器上创建临时文件。

我应该做什么?


解决方案

一个possible solution在客户端使用JavaScript。

客户端算法:

  1. 生成随机唯一令牌。
  2. 提交下载请求,并将令牌包括在GET/POST字段中。
  3. 显示"等待"指示器。
  4. 启动计时器,大约每秒查找名为"fileDownloadToken"(或您决定的任何内容)的cookie。
  5. 如果Cookie存在,并且其值与令牌匹配,则隐藏"等待"指示符。

服务器算法:

  1. 查找请求中的GET/POST字段。
  2. 如果它的值非空,则删除Cookie(例如"fileDownloadToken"),并将其值设置为令牌的值。

客户端源代码(JavaScript):

function getCookie( name ) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
        encodeURIComponent(cName) + "=deleted; expires=" + new Date( 0 ).toUTCString();
}

function setCursor( docStyle, buttonStyle ) {
    document.getElementById( "doc" ).style.cursor = docStyle;
    document.getElementById( "button-id" ).style.cursor = buttonStyle;
}

function setFormToken() {
    var downloadToken = new Date().getTime();
    document.getElementById( "downloadToken" ).value = downloadToken;
    return downloadToken;
}

var downloadTimer;
var attempts = 30;

// Prevents double-submits by waiting for a cookie from the server.
function blockResubmit() {
    var downloadToken = setFormToken();
    setCursor( "wait", "wait" );

    downloadTimer = window.setInterval( function() {
        var token = getCookie( "downloadToken" );

        if( (token == downloadToken) || (attempts == 0) ) {
            unblockSubmit();
        }

        attempts--;
    }, 1000 );
}

function unblockSubmit() {
  setCursor( "auto", "pointer" );
  window.clearInterval( downloadTimer );
  expireCookie( "downloadToken" );
  attempts = 30;
}

服务器代码示例(PHP):

$TOKEN = "downloadToken";

// Sets a cookie so that when the download begins the browser can
// unblock the submit button (thus helping to prevent multiple clicks).
// The false parameter allows the cookie to be exposed to JavaScript.
$this->setCookieToken( $TOKEN, $_GET[ $TOKEN ], false );

$result = $this->sendFile();

其中:

public function setCookieToken(
    $cookieName, $cookieValue, $httpOnly = true, $secure = false ) {

    // See: http://stackoverflow.com/a/1459794/59087
    // See: http://shiflett.org/blog/2006/mar/server-name-versus-http-host
    // See: http://stackoverflow.com/a/3290474/59087
    setcookie(
        $cookieName,
        $cookieValue,
        2147483647,            // expires January 1, 2038
        "/",                   // your path
        $_SERVER["HTTP_HOST"], // your domain
        $secure,               // Use true over HTTPS
        $httpOnly              // Set true for $AUTH_COOKIE_NAME
    );
}

相关文章