从 URL 下载 pdf，而不是在新选项卡中打开答案

【问题标题】：Download pdf from a URL instead of opening in a new tab从 URL 下载 pdf，而不是在新选项卡中打开
【发布时间】：2022-01-11 21:11:23
【问题描述】：

Angular 10 / Typescript 中是否有任何可能的方式从 URL 下载 PDF 而不是在新选项卡中打开它？

示例网址：http://www.africau.edu/images/default/sample.pdf

【问题讨论】：

npmjs.com/package/downloadjs

标签： javascript angular typescript angular10

【解决方案1】：

如果您需要下载并保存它，那么@sasa 建议的带有下载属性的锚标记就足够了。这是 Angular 的一些示例代码。

<a [href]="url" download>Click to download</a>

如果您想以编程方式下载需要使用来自 Angular 的 HttpClient 的文件：

安装这个依赖让你的生活更轻松：

npm install file-saver --save
npm install -D @types/file-saver

并且有一个通用的服务

import {saveAs} from 'file-saver'
@Injectable({ providedIn: 'root' })
export class DownloadService {

  constructor(private http: HttpClient) {}

  downloadUrl(url: string, filename: string): Observable<Blob> {
    return this.http.get(url, {responseType: 'blob' }).pipe(
      map(res => res.blob()),
      tap(blob => saveAs(blob, filename))
    )
  }
}

注意调用函数不会下载文件；您需要将subscribe 转换为返回的Observable<Blob> 或将其转换为Promise 并等待它

【讨论】：

点击下载这是进入新标签页
您可以使用我为您提供的服务。这会弹出一个对话框来保存文件

【解决方案2】：

抱歉，如果我说得太明显了，但 a 标记的 download 属性不起作用？

【讨论】：

谢谢。我正在尝试使用代码下载文件。

【解决方案3】：

您通常需要将内容类型设置为 application/octet-stream 以通知浏览器它应该下载它而不是在选项卡中显示它。不确定在 Angular 10 / Typescript 中具体如何：

【讨论】：