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

Question

Is there any possible way in Angular 10 / Typescript to download a PDF from a URL instead of opening it in a new tab?

样品 URL： http://www.africau.edu/images/default/sample.pdf

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

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

Answer 2

对不起，如果我太明显了，但是a标签的download属性不起作用？

Answer 3

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