来自 API 的 Angular 接收文件答案

【问题标题】：Angular receive file from API来自 API 的 Angular 接收文件
【发布时间】：2020-04-10 14:21:44
【问题描述】：

我的 api 正在生成一个 pdf 文件并返回它。我在邮递员中收到的标题是...

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 →*

而且我可以从邮递员那里保存文件内容。

但是，当我尝试以角度处理时，会出现问题。

我将标题设置为...

setRequestHeaderPDF() {
  return new HttpHeaders({
    'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
    'Content-Type': 'application/pdf',
    'Accept': 'application/pdf'
  })
}

然后我正在尝试两种不同的东西。

首先是responseType: 'blob'。这将返回 blob 没有问题。问题是，正如您在上面看到的，文件名在响应标头中。使用 blob 响应，我无法获取标题。

其次，我没有设置 responseType 并希望将其从响应文本/正文中取出，但这会引发以下错误

消息： “位置 0 处 JSON 中的意外标记 %” 堆： "SyntaxError: 在 XMLHttpRequest.l 的 JSON.parse ()↵ 的位置 0↵ 处的 JSON 中的意外标记 %"

所以我的问题是，如何从 API 获取文件并访问标头和数据？

【问题讨论】：

标签： angular pdf httpresponse

【解决方案1】：

更新：原来是身份验证代理必须剥离标头或其他东西。当我绕过它时，我现在可以得到文件就好了。

好吧，我发现如果使用 CORS，您必须公开某些标头。 API 在 python 烧瓶中，所以我添加了CORS(app, expose_headers=['Content-Disposition', 'x-suggested-filename']，正如这里回答的How to change downloading name in flask?

在邮递员中我得到

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();

这似乎现在可以工作了。

【讨论】：