Angular 7使用授权从服务器启动浏览器文件下载

Question

我需要使用 Angular 7 实现以下功能，但我在执行此操作时遇到了一些问题，所以您可能可以在这里帮助我。

我们有一项服务，它返回一些静态文件（pdf），调用该 api 需要授权。所以我使用以下方法调用 API：

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

但是这个方法实际上做了什么 - 它首先将内容加载到内存中，然后将其显示在浏览器文件加载的列表中。我想要的 - 首先将文件加载到浏览器内存中，我希望浏览器负责加载该文件并显示下载进度。

如果您需要任何其他详细信息，请告诉我。

附：服务响应标题 Content-Disposition: attachment

Answer 1

您实际上需要使用 blob，因为您使用的是 ajax 调用。 先安装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' 看download progress

其他选项

• 您可以向服务器发送第一个请求 ajax，并在服务器端生成随机 URL 可用于一次下载文件

• 然后使用这个例子，将接收到的链接传入href，触发点击事件。像这个例子

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