下载文件，而无需使用AJAX [英] download file without using ajax

问题描述

我想按照这个<一个href=\"http://geekswithblogs.net/Gruff$c$c/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx\"相对=nofollow>例如来显示进度条不使用Ajax来下载文件。

I am trying to follow this example to show progress bar without using ajax to download file.

我用淘汰赛，html和的WebAPI。我有低于code这按钮的单击事件

I use knockout,html and webapi. I am having below code which calls href on click event of button

this.getMeData= function () {

    uRlPath("/api/GetSomeData?id=" + 12)
                + "&name=" + getName.toString()
                + "&downloadtoken=" + new Date().getTime());

    $('#myLink').click();

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


    };

这是我的HTML

   <tr>
            <td class="labelText">
                <button data-bind="click: getMeData">
                   Download Data
                </button>

            </td>
        </tr>
        <tr>
            <td>
               <a id="myLink" data-bind="attr: { href: uRlPath }" style="visibility: hidden">Open </a>
            </td>
        </tr>

我现在想打电话给我的HREF的Click事件

I now want to call some function on click event of my href

这是返回我的cookie和二进制文件

This is my webapi method which returns me cookie and binary file

 public HttpResponseMessage GetSomeData(int id, string name, string downloadtoken)
    {
      var returnData= new HttpResponseMessage(HttpStatusCode.OK);
      returnData.Content = new ByteArrayContent(mybyteArray);
       var cookie = new CookieHeaderValue("downloadtoken", downloadtoken);
        returnData.Headers.AddCookies(new CookieHeaderValue[] { cookie });
      returnData.Content.Headers.ContentDisposition =
            new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
        returnData.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");


        returnData.Content.Headers.ContentDisposition.FileName = "myfile.pdf";
        return returnData;
    }

要很precise我想有作为的例子中提供相同的行为。在例如他们使用的形式提交，但我没有任何形式，我只是使用HTML，淘汰赛。我已经包含例子中提到的所有库。

To be very precise i want to have same behaviour as provided in example. In example they use form to submit but i dont have any form as i just use html,knockout. I have included all libraries mentioned in example.

不要让我知道如果你需要更多的投入。

Do let me know if you need more inputs.

推荐答案

我发现自己的解决方案。我用下面code，不断检查的cookie

I found solution myself. I used below code to check constantly for cookie

var attempts = 30;
var checkTime

        startProgressBar(true)

        checkTime= window.setInterval(function () {

            var cookieValue = $.cookie('downloadtoken');

            if ((cookieValue == token) || (attempts == 0)){
                 stopDownload();
            }
            attempts --;
        }, 1000);

在 finishDownload 功能我清楚的cookie，并停止进度条

In finishDownload function i clear cookie and stop progress bar

 function stopDownload() {
        window.clearInterval(checkTime);
        $.cookie('downloadtoken', null); //clears this cookie value
        stopProgressBar(false);
    }

这是HTML code的进度条

This is html code for progress bar

 <div  data-bind="visible: stopProgressBar" style="top:248px;left: 320px;">
    <img src="../images/ProgressBar.jpg"  />
</div>

这篇关于下载文件，而无需使用AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！