Angular 從 API 接收文件

Question

我的 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 獲取文件並訪問標題和數據？

Answer 1

更新：原來是身份驗證代理必須剝離標頭或其他東西。 當我繞過它時，我現在可以得到文件就好了。

好吧，我發現如果使用 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();

這似乎現在起作用了。