Angular 文件下载

1、需求 在项目开发中，前端使用的是Angular框架，在文件下载的时候遇到问题，文档类型通过超链接可以直接下载，但是图片和pdf文档使用超链接不能下载，只能浏览。

2、解决办法： ① 创建文件服务 fileService.ts 使用ng generate service file 创建文件，内容如下：

import { Observable } from 'rxjs'; import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class FileService { constructor(private httpClient: HttpClient) { } download(url: string): Observable<Blob> { return this.httpClient.get(url, {responseType: 'blob'}) } }

② 在组件的TypeScript文件中加入fileDownload()方法

fileDownload(url: string, fileName: string): void { this.fileService .download(url) .subscribe(blob => { const a = document.createElement('a') const objectUrl = URL.createObjectURL(blob) a.href = objectUrl a.download = fileName; a.click(); URL.revokeObjectURL(objectUrl); }) }

③ 在组件的HTML模板中使用超链接进行文件下载

<a (click)="fileDownload('文件下载URL', '文件名')"></a>