如何下载Angular2或更高版本的文件

好吧，我写了一段代码，灵感来自于上面的许多答案，应该很容易在大多数情况下工作，即服务器发送一个带有内容处置头的文件，而不需要任何第三方安装，除了rxjs和angular。

首先，如何从组件文件调用代码

this.httpclient.get(
`${myBackend}`,
{
observe: 'response',
responseType: 'blob'
}
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));

正如你所看到的，它基本上是angular的平均后端调用，只有两个变化

1. 我观察的是反应而不是身体
2. 我明确表示响应是一个blob

一旦从服务器获取文件，原则上我就将保存文件的整个任务委托给helper函数(我将其保存在一个单独的文件中)，并将其导入到需要的组件中

export const SaveFileResponse =
(response: HttpResponse<Blob>,
filename: string = null) =>
{
//null-checks, just because :P
if (response == null || response.body == null)
return;


let serverProvidesName: boolean = true;
if (filename != null)
serverProvidesName = false;


//assuming the header is something like
//content-disposition: attachment; filename=TestDownload.xlsx; filename*=UTF-8''TestDownload.xlsx
if (serverProvidesName)
try {
let f: string = response.headers.get('content-disposition').split(';')[1];
if (f.includes('filename='))
filename = f.substring(10);
}
catch { }
SaveFile(response.body, filename);
}


//Create an anchor element, attach file to it, and
//programmatically click it.
export const SaveFile = (blobfile: Blob, filename: string = null) => {
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blobfile);
a.download = filename;
a.click();
}

如果一个标签打开和关闭没有下载任何东西，我试着跟随模拟锚链接，它工作。

downloadFile(x: any) {
var newBlob = new Blob([x], { type: "application/octet-stream" });


// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob);
return;
}


// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(newBlob);


var link = document.createElement('a');
link.href = data;
link.download = "mapped.xlsx";
// this is necessary as link.click() does not work on the latest firefox
link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));


setTimeout(function () {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(data);
link.remove();
}, 100);  }

下面的代码适用于我

让HTML像这样:

<button type="button" onclick="startDownload(someData)">Click to download!</button>

JS如下:

let someData = {};
someData.name = 'someName';
someData.fileurl= 'someUrl';


function startDownload(someData){
let link = document.createElement('a');
link.href = someData.fileurl; //data is object received as response
link.download = someData.fileurl.substr(someData.fileurl.lastIndexOf('/') + 1);
link.click();
}

到目前为止，我发现这些答案既缺乏洞察力，也缺乏警告。你可以也应该注意与IE10+的不兼容性(如果你在乎的话)。

这是完整的示例，其中包括应用程序部分和服务部分。注意，我们设置观察:“响应”来捕获文件名的头文件。还要注意，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为核心，具有内容配置和扩展功能;MediaType

 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 + ASP。Net 5 web API

您可以从服务器返回一个Blob对象，并创建一个锚标记，并将href属性设置为从Blob创建的对象URL。现在点击锚点将下载文件。您也可以设置文件名。

downloadFile(path: string): Observable<any> {
return this._httpClient.post(`${environment.ApiRoot}/accountVerification/downloadFile`, { path: path }, {
observe: 'response',
responseType: 'blob'
});
}


saveFile(path: string, fileName: string): void {
this._accountApprovalsService.downloadFile(path).pipe(
take(1)
).subscribe((resp) => {
let downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(resp.body);
downloadLink.setAttribute('download', fileName);
document.body.appendChild(downloadLink);
downloadLink.click();
downloadLink.remove();
});
            

}

后端

[HttpPost]
[Authorize(Roles = "SystemAdmin, SystemUser")]
public async Task<IActionResult> DownloadFile(FilePath model)
{
if (ModelState.IsValid)
{
try
{
var fileName = System.IO.Path.GetFileName(model.Path);
var content = await System.IO.File.ReadAllBytesAsync(model.Path);
new FileExtensionContentTypeProvider()
.TryGetContentType(fileName, out string contentType);
return File(content, contentType, fileName);
}
catch
{
return BadRequest();
}
}


return BadRequest();


}

创建一个临时锚标记，然后用Javascript以编程方式单击它

async function downloadFile(fileName) {
const url = document.getElementById("url").value


const link = document.createElement('a');
link.href = await toDataURL(url);
link.setAttribute('download', fileName ? fileName : url.split('/').pop());
link.setAttribute('target', 'blank');
document.body.appendChild(link);
link.click();
}




function toDataURL(url) {
return fetch(url)
.then((response) => {
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
});
}

<input id="url" value="https://images.pexels.com/photos/1741205/pexels-photo-1741205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"/>
<button onclick="downloadFile('test')">Download</button>

1. 导致延迟，为此必须实现自定义加载。
2. 将文件加载到内存中，这意味着对于大文件，浏览器将崩溃。
3. 请勿使用已实现的浏览器下载功能。

前端端非常简单(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);
}
}

请记住，为了表示目的，我简化了我的实现，所以还没有对其进行测试。

用户@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();
});
}