javascript - 使用 Knockout.JS 从 JSON 数据生成下载链接

Question

我有一个表，它是使用 Knockout.js 动态填充的。表格的(稍微简化的)主体如下所示:

<tbody data-bind="foreach: results">
  <tr>
    <td id="resultTd">
      <a data-bind="attr: { href: ('api/results/' + instanceID + '/' + $data.name) }">
        <span data-bind="text: $data.name"></span>
      </a>
    </td>
  </tr>
</tbody>

我希望 a 标签成为指向生成的表格行后面的文件(通常是 .doc)的链接。问题是(您可以假设链接等设置正确)链接返回 JSON，如下所示:

JSON:

{
   "version":{
      "major":1,
      "minor":1,
      "build":-1,
      "revision":-1,
      "majorRevision":-1,
      "minorRevision":-1
   },
   "content":{
      "headers":[
         {
            "key":"Content-Type",
            "value":[
               "application/octet-stream"
            ]
         },
         {
            "key":"Content-Disposition",
            "value":[
               "attachment; filename=foo.doc"
            ]
         }
      ]
   },
   "statusCode":200,
   "reasonPhrase":"OK",
   "headers":[

   ],
   "requestMessage":null,
   "isSuccessStatusCode":true
}

如您所见，它包含一个附件“foo.doc”(假设这是生成的名称 $data.name)。

我的问题如下:当我点击 td 元素时，我想触发一个下载提示来下载 JSON 中指定的文件。我该怎么做？

在此先感谢您的帮助。

Answer 1

正如 Matt Burland 所说，问题出在服务器端。在我的应用程序中，我有一个类似的情况，我有一个 <a>已生成 href 的标签。

在后端，您必须确保正确构建响应，以便浏览器了解您当前正在下载文件。例如，这是我的应用程序在触发下载 word 文档时具有的响应 header :

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 141312
Content-Type: application/octet-stream
Content-Encoding: UTF-8
Expires: -1
Server: Microsoft-IIS/7.5
Content-Disposition: attachment; filename="I-C1-1.1%20MJ%20JB%20E%20(2012-07-16)%20.doc"
Charset: UTF-8
X-AspNet-Version: 4.0.30319
X-UA-Compatible: IE=8
Date: Tue, 12 Aug 2014 17:46:34 GMT

对于服务器端，这是我下载文档的代码(我粘贴的响应 header )

FileStream fileStream = fileProvider.Open(filePath);
var response = new HttpResponseMessage();
response.Content = new StreamContent(fileStream);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = Uri.EscapeDataString(fileName);
response.Content.Headers.Add("Content-Encoding", "UTF-8");
response.Content.Headers.Add("Charset", "UTF-8");
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentLength = fileProvider.GetLength(filePath);//new FileInfo(filePath).Length;
return response;

对于 response.Content.Headers.ContentDisposition.FileName除非您有特殊字符，否则您不必对文件名进行转义，这是我的情况，因为我们的应用程序管理法语文档。

如果您需要更多解释或对我的回答有任何意见，请随时回复。