[英]Angular receive file from API
我的 api 正在生成 pdf 文件并返回它。 我在 postman 中收到的标头是...
Content-Type →application/pdf
Content-Length →2099
Content-Disposition →attachment; filename=Ticket_20200409210413358621_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Fri, 10 Apr 2020 09:04:13 GMT
Access-Control-Allow-Origin →*
我可以从 postman 保存文件内容没有问题。
但是,当我尝试在 angular 中得到这个时,就会出现问题。
我将标题设置为...
setRequestHeaderPDF() {
return new HttpHeaders({
'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
'Content-Type': 'application/pdf',
'Accept': 'application/pdf'
})
}
然后我正在尝试两种不同的东西。
首先是responseType: 'blob'
。 这将返回 blob 没有问题。 问题是,正如您在上面看到的,文件名在响应标头中。 使用 blob 响应,我无法获取标题。
其次,我没有设置 responseType 并希望将其从响应文本/正文中取出,但这会引发以下错误
message: "Unexpected token % in JSON at position 0" stack: "SyntaxError: Unexpected token % in JSON at position 0↵ at JSON.parse ()↵ at XMLHttpRequest.l "
所以我的问题是,如何从 API 获取文件并访问标题和数据?
更新:原来是身份验证代理必须剥离标头或其他东西。 当我绕过它时,我现在可以得到文件就好了。
好吧,我发现如果使用 CORS 您必须公开某些标头。 The API is in python flask so I added CORS(app, expose_headers=['Content-Disposition', 'x-suggested-filename']
as is answered here How to change downloading name in flask?
在 postman 我得到
Content-Type →application/pdf
Content-Length →2093
Content-Disposition →attachment; filename=Ticket_20200410171501039158_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Sat, 11 Apr 2020 05:15:01 GMT
x-suggested-filename →Ticket_20200410171501039158_Home_3.pdf
Access-Control-Allow-Origin →*
Access-Control-Expose-Headers →Content-Disposition, x-suggested-filename
Via →1.1 google
Alt-Svc →clear
在我的 angular 应用程序中,我切换到使用 XMLHttpRequest() 来处理这个。
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('id_token'));
xhr.setRequestHeader('Content-Type', 'application/pdf');
xhr.setRequestHeader('Accept', 'application/pdf');
xhr.responseType = 'blob';
xhr.onload = function (this, event) {
var blob = this.response;
console.log(this.getAllResponseHeaders());
var contentDispo = this.getResponseHeader('Content-Disposition');
var fileName = contentDispo.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
saveAs(blob, fileName);
}
xhr.send();
这似乎现在起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.