不使用ajax下载文件

Question

我正在尝试按照example 显示进度条，而不使用 ajax 下载文件。

我使用淘汰赛、html 和 webapi。我有下面的代码，它在按钮的点击事件上调用 href

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 的点击事件上调用一些函数

这是我的 webapi 方法，它返回我的 cookie 和二进制文件

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

非常准确地说，我希望具有与示例中提供的相同的行为。例如，他们使用表单提交，但我没有任何表单，因为我只使用 html，敲除。我已经包含了示例中提到的所有库。

如果您需要更多输入，请告诉我。

Answer 1

我自己找到了解决方案。我使用下面的代码不断检查 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并停止进度条

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

这是进度条的html代码

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

Answer 2

如果您只想在单击链接时调用 blockUIForDownload 函数，您可以使用“单击”绑定来完成，就像您为按钮所做的那样：

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

（假设该函数已在 viewModel 中定义。）

在此处查看“click”绑定的官方文档：http://knockoutjs.com/documentation/click-binding.html

但是，在我看来，您有点过于复杂了 - 在您发布的示例中，需要一个隐藏的输入字段，因为他们使用表单输入作为将令牌传输到服务器的一种方式。

在您的情况下，令牌作为 href 属性的一部分传递，因此您可以大大简化代码：

1) 彻底删除隐形链接

2) 将 getMeData 函数替换为以下内容：

this.getMeData= function () {
    window.open("/api/GetSomeData?id=" + 12
                + "&name=" + getName.toString()
                + "&downloadtoken=" + new Date().getTime());
    blockUIForDownload();
    };