Angular 7通過授權啟動從服務器下載瀏覽器文件

Question

我需要使用Angular 7實現以下功能，並且這樣做存在一些問題，因此您可能會在這里為我提供幫助。

我們提供的服務會返回一些靜態文件（pdfs），並且需要授權才能調用該api。 因此，我使用以下方法調用API：

  download(uri) { this.http.get(uri, { headers: { 'Authorization': 'Bearer ' + token, 'Accept':'application/pdf' } }).subscribe(()=>{}); 

但是此方法的實際作用-首先將內容加載到內存中，然后將其顯示在瀏覽器文件加載的列表中。 我想要的-首先將文件加載到瀏覽器內存中，我希望該瀏覽器負責加載該文件並顯示下載進度。

如果您需要任何其他詳細信息，請告訴我。

PS服務以標題Content-Disposition：附件響應

Answer 1

實際上，由於您正在使用ajax調用，因此實際上需要使用blob。 首先安裝https://github.com/eligrey/FileSaver.js#readme然后

import { saveAs } from 'file-saver';

download(uri) {
this.http.get(uri, {
  headers: {
    'Authorization': 'Bearer ' + token,
     responseType: 'blob' 
  }
}).subscribe((res)=>{
var blob = new Blob(res, {type: "application/pdf"});
saveAs(blob, "file.pdf");
});

• 您的后端應返回數組字節

更新如果您想接收下載進度的事件，可以添加observe: 'events'查看下載進度

其他選擇

• 您可以向服務器發送第一個請求ajax ，並且可以在服務器端生成隨機URL，一次可以下載文件

• 然后使用此示例，並在href中傳遞接收到的鏈接並觸發click事件。 像這個例子

   function download(filename, link) { var element = document.createElement('a'); element.setAttribute('href', link); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); }