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

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

如果您需要下载并保存它，使用 @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 并等待它

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

Download pdf from a URL instead of opening in a new tab

javascript

typescript

angular

angular10