我有一个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);
}
到目前为止，我发现这些答案既缺乏洞察力，也缺乏警告。你可以也应该注意与IE10+的不兼容性(如果你在乎的话)。
这是完整的示例，其中包括应用程序部分和服务部分。注意，我们设置了observe: "response"来捕捉文件名的头信息。还要注意，Content-Disposition报头必须由服务器设置并公开，否则当前的Angular HttpClient将不会传递它。我在下面添加了一段dotnet核心代码。
public exportAsExcelFile(dataId: InputData) {
return this.http.get(this.apiUrl + `event/export/${event.id}`, {
responseType: "blob",
observe: "response"
}).pipe(
tap(response => {
this.downloadFile(response.body, this.parseFilename(response.headers.get('Content-Disposition')));
})
);
}
private downloadFile(data: Blob, filename: string) {
const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;'});
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
private parseFilename(contentDisposition): string {
if (!contentDisposition) return null;
let matches = /filename="(.*?)"/g.exec(contentDisposition);
return matches && matches.length > 1 ? matches[1] : null;
}
Dotnet核心，具有内容处理和媒体类型
private object ConvertFileResponse(ExcelOutputDto excelOutput)
{
if (excelOutput != null)
{
ContentDisposition contentDisposition = new ContentDisposition
{
FileName = excelOutput.FileName.Contains(_excelExportService.XlsxExtension) ? excelOutput.FileName : "TeamsiteExport.xlsx",
Inline = false
};
Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
Response.Headers.Add("Content-Disposition", contentDisposition.ToString());
return File(excelOutput.ExcelSheet, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
}
else
{
throw new UserFriendlyException("The excel output was empty due to no events.");
}
}
虽然这个问题很老了，但没有一个答案是可行的。
据我所知，所有的文件都是先加载到内存中，然后保存。
这样我们:
导致延迟，为此必须实现自定义加载。
将文件加载到内存中，这意味着对于大文件，浏览器将崩溃。
请勿使用已实现的浏览器下载功能。
前端端非常简单(Angular 12):
downloadFile(url: string, fileName: string): void {
const downloadLink = document.createElement('a');
downloadLink.download = fileName;
downloadLink.href = url;
downloadLink.click();
}
在后端(。NET 6)我们需要使用流并写入响应体:
public void Get(string fileId)
{
var fileName = fileService.GetFileName(fileId);
var fileContentType = fileService.GetFileContentType(fileId);
this.Response.Headers.Add(HeaderNames.ContentType, fileContentType);
this.Response.Headers.Add(HeaderNames.ContentDisposition, $"attachment; filename=\"{fileName}\"");
fileService.GetFile(Response.Body, fileId);
}
文件内容类型和名称可以从DB(如果您将文件信息保存在其中)或文件系统中检索。
从扩展解析内容类型。
我像这样写入流:
public void GetFile(Stream writeStream, string fileId)
{
var file = GetFileInfo(fileId);
try
{
var fileStream = File.OpenRead(file.FullName);
byte[] buffer = new byte[32768];
int read;
while ((read = fileStream.Read(buffer, 0, buffer.Length)) > 0)
{
writeStream.Write(buffer, 0, read);
}
writeStream.Flush();
}
catch (Exception e)
{
throw new CustomException($"Error occured while reading the file. Inner Exception Message: ({e.Message}) Stack Trace: ({e.StackTrace})", ErrorCode.FileReadFailure, e);
}
}
请记住，为了表示目的，我简化了我的实现，所以还没有对其进行测试。
我找到的答案要么是在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();
});
}
