我有一个WebApi / MVC应用程序，我正在为它开发一个angular2客户端(以取代MVC)。我在理解Angular如何保存文件时遇到了一些麻烦。
请求是可以的(与MVC一起工作很好，我们可以记录接收到的数据)，但我不知道如何保存下载的数据(我主要遵循与本文相同的逻辑)。我确信这是愚蠢的简单，但到目前为止，我根本没有领会它。
组件函数的代码如下。我尝试了不同的替代方案，blob方式应该是我所理解的方式，但URL中没有createObjectURL函数。我甚至不能在窗口中找到URL的定义，但显然它存在。如果我使用FileSaver.js模块，我得到同样的错误。所以我猜这是最近改变的或者还没有实现的东西。我如何触发文件保存在A2?
downloadfile(type: string){
let thefile = {};
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
let url = window.URL.createObjectURL(thefile);
window.open(url);
}
为了完整起见，获取数据的服务如下所示，但它所做的唯一一件事是发出请求并在没有映射的情况下传递数据:
downloadfile(runname: string, type: string){
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.catch(this.logAndPassOn);
}
正如Alejandro correor所提到的，这是一个简单的范围错误。订阅是异步运行的，并且必须将打开放在该上下文中，以便在触发下载时数据完成加载。
也就是说，有两种方法可以做到这一点。正如文档所推荐的，该服务负责获取和映射数据:
//On the service:
downloadfile(runname: string, type: string){
var headers = new Headers();
headers.append('responseType', 'arraybuffer');
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
.catch(this.logAndPassOn);
}
然后，在组件上，我们只需订阅并处理映射数据。有两种可能。第一个，正如最初的帖子所建议的，但需要一个小的修正，正如Alejandro所指出的:
//On the component
downloadfile(type: string){
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => window.open(window.URL.createObjectURL(data)),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
}
第二种方法是使用FileReader。逻辑是相同的，但是我们可以显式地等待FileReader加载数据，避免嵌套，并解决异步问题。
//On the component using FileReader
downloadfile(type: string){
var reader = new FileReader();
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(res => reader.readAsDataURL(res),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
reader.onloadend = function (e) {
window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
}
}
注意:我试图下载一个Excel文件，即使下载被触发(所以这回答了问题)，文件是损坏的。查看这篇文章的答案以避免损坏文件。
我找到的答案要么是在Angular 13.1上无法运行，要么是不必要的复杂(就像被接受的例子一样)，而且没有解释为什么这是必要的。
对于像Angular这样不断变化的生态系统来说，要求附加版本号是非常有用的。
用户@Aleksandar Angelov提供的迷你代码片段绕过了会话系统，因此需要进行不必要的授权。
根据他的回答，我得出了以下代码:
downloadConfiguration(url: string, filename: string) {
this.http.get(url, {responseType: 'blob'})
.subscribe(data => {
// console.log("data", data);
var url = window.URL.createObjectURL(data);
let downloadLink = document.createElement('a');
downloadLink.href = url
downloadLink.setAttribute('download', filename);
downloadLink.click();
});
}
试试这个!
1 -安装显示保存/打开文件弹出的依赖项
npm install file-saver --save
npm install -D @types/file-saver
2-用这个功能创建一个服务来接收数据
downloadFile(id): Observable<Blob> {
let options = new RequestOptions({responseType: ResponseContentType.Blob });
return this.http.get(this._baseUrl + '/' + id, options)
.map(res => res.blob())
.catch(this.handleError)
}
3-在组件中使用“file-saver”解析blob
import {saveAs as importedSaveAs} from "file-saver";
this.myService.downloadFile(this.id).subscribe(blob => {
importedSaveAs(blob, this.fileName);
}
)
这对我很管用!
这是我在我的案例中做的事情
// service method
downloadFiles(vendorName, fileName) {
return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
.catch((error: any) => _throw('Server error: ' + error));
}
// a controller function which actually downloads the file
saveData(data, fileName) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
let blob = new Blob([data], { type: "octet/stream" }),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
// a controller function to be called on requesting a download
downloadFiles() {
this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
() => console.info("OK"));
}
解决方案从这里引用
