可以通过创建服务来在Angular 13中从API下载文件。以下是一个示例:
使用Angular CLI创建一个服务文件,以便在整个应用程序中使用下载方法。在命令行中,运行以下命令:
ng generate service download
这将在src/app目录下创建一个名为“download.service.ts”的文件。在这个文件中,添加以下代码:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DownloadService {
constructor(private http: HttpClient) { }
public downloadFile(url: string): Observable {
return this.http.get(url, { responseType: 'blob' });
}
}
在这个服务中,我们使用Angular的HttpClient模块来发起HTTP请求,并设置响应类型为‘blob’。这允许我们将响应作为Blob对象来处理,从而下载文件。
现在我们已经创建了下载服务,可以在整个应用中调用它。以下是一个示例组件,它使用了download服务来从API下载PDF文件:
import { Component } from '@angular/core';
import { DownloadService } from './download.service';
@Component({
selector: 'app-download',
template: `
`
})
export class DownloadComponent {
constructor(private downloadService: DownloadService) { }
public download() {
const pdfUrl = 'http://api.example.com/files/pdf/sample.pdf';
this.downloadService.downloadFile(pdfUrl).subscribe(
blob => {
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'sample.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(downloadUrl);
}
);
}
}
在这个示例中,我们在组件中注入了下载服务,并在点击按钮时调用下载方法。当下载服务返回一个Blob对象时,我们使用Window.URL.createObjectURL()创建一个下载链接、设置下载链接的下载属性并将其添加到页面的DOM树中,最后模拟点击该链接以下载文件。最后,我们删除链接并释放其URL对象URL.revokeObjectURL()。
这个解决方法可以让我们很容易