Fetch API 强制下载文件

Question

我正在调用一个 API 以使用获取 API 从服务器下载 excel 文件，但它没有强制浏览器下载，下面是我的标头响应：

 HTTP/1.1 200 OK Content-Length: 168667
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Server: Microsoft-IIS/8.5
Content-Disposition: attachment; filename=test.xlsx
Access-Control-Allow-Origin: http://localhost:9000
Access-Control-Allow-Credentials: true
Access-Control-Request-Method: POST,GET,PUT,DELETE,OPTIONS
Access-Control-Allow-Headers: X-Requested-With,Accept,Content-Type,Origin
Persistent-Auth: true
X-Powered-By: ASP.NET
Date: Wed, 24 May 2017 20:18:04 GMT

在我用来调用 API 的代码下方：

 this.httpClient.fetch(url, {
    method: 'POST',
    body: JSON.stringify(object),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})

原文由 Ahmed Saber 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

浏览器不会显示通常的下载交互（显示另存为…对话框等），只有当您导航到该资源时。通过示例更容易显示差异：

1. window.location='http://mycompany.com/'
2. 在后台通过 XHR/Fetch 加载 http://mycompany.com/ 。

1. 浏览器将加载页面 并 显示其内容。 2.浏览器会加载原始数据返回给你，但是你要自己显示。

您必须对文件执行类似的操作。你有原始数据，但你必须自己“展示”它。为此，您需要为下载的文件创建一个对象 URL 并导航到它：

 this.httpClient
    .fetch(url, {method, body, headers})
    .then(response => response.blob())
    .then(blob => URL.createObjectURL(blob))
    .then(url => {
        window.open(url, '_blank');
        URL.revokeObjectURL(url);
    });

这将获取响应，将其作为 blob 读取，创建一个 objectURL，将其打开（在新选项卡中），然后撤销该 URL。

有关对象 URL 的更多信息：https: //developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

原文由 balazska 发布，翻译遵循 CC BY-SA 3.0 许可协议