如何直接从 API (Angular) 下载 pdf？

Question

我需要从Angular中的一个API下载一个PDF。

所以，我写了一个服务来调用 API：

 getPDF(id:any) {
    return this.http.get(
       `url?=${id}`,
        { responseType: 'blob' as 'json', observe: 'response' }
    );
 }

在我的组件文件中，我正在调用服务来下载 PDF。

  onGeneratepdf() {
    this.service
  .getPDF(
    123
  )
  .subscribe((res: any) => {
    let filename = res.header
    ?.get('content-disposition')
    ?.split(';')[1]
    .split('=')[1];
  let blob: Blob = res.body as Blob;
  var a = document.createElement('a');
  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.click();
  });

}

点击 GeneratePDF 后，pdf 正在下载，但问题是......它正在下载文件名undefined.pdf ...它应该以user.pdf之类的名称下载，而且我得到的响应标头为

access-control-allow-origin: *

cache-control: no-cache, no-store, max-age=0, must-revalidate

content-disposition: attachment; filename=user.pdf

content-type: application/pdf

请帮我解决这些问题。

提前致谢。

Answer 1

onGeneratepdf() {
        this.service
      .getPDF(
        123
      )
      .subscribe((res: any) => {
        let filename = res.headers
        ?.get('content-disposition')
        ?.split(';')[1]
        .split('=')[1];
      let blob: Blob = res.body as Blob;
      var a = document.createElement('a');
      a.download = filename;
      a.href = window.URL.createObjectURL(blob);
      a.click();
      });

请尝试上面的代码，你写的 res.header 应该是 res.headers

如果上面的代码不适合你，那么看看下面的链接，你会在这里找到你的解决方案。

谢谢！