获取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

只有当您导航到该资源时,浏览器才会显示下载的常用交互(显示"另存为..."对话框等).通过示例更容易显示差异:

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

Answer 2

我的解决方案基于@VINEE 和@balazska 解决方案。我想避免document.body通过以下方式操作或打开新选项卡window.open(url, '_blank');

return fetch(urlEndpoint, options)
  .then((res) => res.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((href) => {
    Object.assign(document.createElement('a'), {
      href,
      download: 'filename.csv',
    }).click();
  });

Answer 3

有一些方便的库，为了解决我在 CSV/文本下载方面遇到的问题，我使用了FileSaver。

例子：

var saveAs = require('file-saver');

fetch('/download/urf/file', {
  headers: {
    'Content-Type': 'text/csv'
  },
  responseType: 'blob'
}).then(response => response.blob())
  .then(blob => saveAs(blob, 'test.csv'));

还有download.js lib，如本问题中所述。

Answer 4

您可以使用下面的函数来做到这一点

download(filename) {
 fetch(url , { headers })
 .then(response => response.blob())
 .then(blob => URL.createObjectURL(blob))
 .then(uril => {
 var link = document.createElement("a");
 link.href = uril;
 link.download = filename + ".csv";
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 });
}

这里我想下载一个CSV文件，所以我将.csv添加到文件名中。