我有一个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);
}
这个答案表明不能直接使用AJAX下载文件，主要是出于安全原因。我来描述一下在这种情况下我怎么做，
01. 在component.html文件中的锚标记中添加href属性，
如:-
<div>
<a [href]="fileUrl" mat-raised-button (click)='getGenaratedLetterTemplate(element)'> GENARATE </a>
</div>
02. 在组件中执行以下所有步骤。Ts绕过安全级别，弹出对话框，
如:-
import { environment } from 'environments/environment';
import { DomSanitizer } from '@angular/platform-browser';
export class ViewHrApprovalComponent implements OnInit {
private apiUrl = environment.apiUrl;
fileUrl
constructor(
private sanitizer: DomSanitizer,
private letterService: LetterService) {}
getGenaratedLetterTemplate(letter) {
this.data.getGenaratedLetterTemplate(letter.letterId).subscribe(
// cannot download files directly with AJAX, primarily for security reasons);
console.log(this.apiUrl + 'getGeneratedLetter/' + letter.letterId);
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl + 'getGeneratedLetter/' + letter.letterId);
}
注意:如果状态码为200时出现错误“OK”，则此回答将有效
问题是可观察对象运行在另一个上下文中，所以当你尝试创建URL var时，你有一个空对象，而不是你想要的blob。
解决这个问题的众多方法之一如下:
this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
error => console.log('Error downloading the file.'),
() => console.info('OK');
当请求准备好时，它将调用函数"downloadFile"，定义如下:
downloadFile(data: Response) {
const blob = new Blob([data], { type: 'text/csv' });
const url= window.URL.createObjectURL(blob);
window.open(url);
}
这个blob已经被完美地创建了，所以URL变量，如果没有打开新的窗口，请检查你已经导入'rxjs/Rx';
import 'rxjs/Rx' ;
我希望这能帮助到你。
正如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文件，即使下载被触发(所以这回答了问题)，文件是损坏的。查看这篇文章的答案以避免损坏文件。
