我正在调用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'
}
})
答案 0 :(得分:7)
只有当您导航到该资源时,浏览器才会显示下载的常用交互(显示“另存为...”对话框等)。通过示例更容易显示差异:
window.location='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。
有关对象网址的更多信息: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
答案 1 :(得分:2)
有一些方便的库,为了解决我使用FileSaver的CSV /文本下载问题。
示例:
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,如this question中所述。
答案 2 :(得分:2)
您可以使用以下功能来做到这一点
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。
答案 3 :(得分:1)
我的解决方案基于@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();
});
答案 4 :(得分:0)
我找到了另一种下载方式,它可以在IE上使用