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.');
});

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

1 个答案: