download - 获取 API 以强制下载文件

Question

我正在调用一个 API 来使用 fetch 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'
    }
})

Answer 1

浏览器不会显示下载的通常交互(显示另存为...对话框等)，仅当您导航到该资源时。用一个例子更容易展示差异:

window.location='http://mycompany.com/'

负载 http://mycompany.com/通过 XHR/Fetch 在后台。

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