单击链接时显示进度指示器

Question

我的页面上有一个 HTML 链接。

 <a id="myDownLoadlink" data-bind="attr: { href: uRlPath }" style="visibility: hidden">Get data file</a>

当我单击链接时，我会调用 Web API 服务并下载一些文件。我不明白如何在下载内容时显示进度条。这就是我调用 Web API 服务的方式

uRlPath("/api/GetMyData?id=" + 2
                + "&name=" + name.toString());
$('#myDownLoadlink').click();

location.href = $('#linkToDownload').attr('href');

如果我可以使用 Ajax 调用，那么显示进度条可能很容易，但在我的情况下，由于某种原因我不能这样做。请告诉我是否有任何出路。

Answer 1

看到您有服务器访问权限，您可以尝试执行此操作。 一点解释。您应该在 iFrame 中加载下载链接。然后会开始下载，但是因为当加载的 url 是附件时浏览器不会给出 onload 回调，我们需要一个服务器解决方法。

解决方法需要您向后端发送令牌。然后，当您发回文件时，您必须使用此响应将客户端的 cookie 设置为此值。

cookie 参数应称为 downloadtoken。如果设置了此 cookie，代码将每 200 秒检查一次。仅当页面加载完成时才会设置，也就是当您进入文件时。

玩得开心。

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();
}



var downloadFile = function(url,completeCallback){
    var downloadToken = new Date().getTime();
    iframe  = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);



    iframe.src = url + '&downloadtoken=' +downloadToken;

    var checkServerFeedback = function(){
        var outcome = getCookie('downloadtoken');
        if(downloadtoken == outcome){
            expireCookie('downloadtoken');
            completeCallback();
        }
        setTimeout(checkServerFeedback,200);
    };
    setTimeout(checkServerFeedback,200);
};



/**
    Start of app code
**/
console.log('Add loader here');
downloadFile('http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip',function(){
    console.log('The file has been downloaded remove loader here.');
});