Question

我需要使用Angular 7实现以下功能，并且在执行此操作时遇到了一些问题，因此您可能会在这里为我提供帮助。

我们有一个返回一些静态文件（pdfs）的服务，并且需要授权才能调用该api。因此，我使用以下方法调用API：

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

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

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

P.S。服务以标题 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' 看download progress

其他选项

您可以向服务器发送第一个请求 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);
}

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

1 个答案: