Question

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

我使用knockout，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中定义。）

请参阅官方文档中的“点击”绑定：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();
    };

不使用ajax下载文件

2 个答案: