如何使用 Angular2 或更高版本下载文件
How do I download a file with Angular2 or greater
我有一个 WebApi/MVC 应用程序，我正在为其开发一个 angular2 客户端（以替换 MVC）。我在理解 Angular 如何保存文件时遇到了一些麻烦。
请求没问题（在 MVC 上工作正常，我们可以记录收到的数据）但我不知道如何保存下载的数据（我主要遵循与 [=16= 中相同的逻辑]).我确信它非常简单，但到目前为止我根本没有掌握它。
组件函数的代码如下。我尝试了不同的替代方法，据我所知，blob 方式应该是可行的方式，但是 URL 中没有函数 createObjectURL。我什至在 window 中找不到 URL 的定义，但显然它存在。如果我使用 FileSaver.js module 我会得到同样的错误。所以我猜这是最近发生了变化或尚未实施的事情。如何触发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);
}
问题在于可观察对象在另一个上下文中运行，因此当您尝试创建 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 var，如果没有打开新的 window 请检查您是否已经导入 'rxjs/Rx' ;
import 'rxjs/Rx' ;
希望对您有所帮助
如 所述，这是一个简单的范围错误。 subscribe 是异步的 运行 并且 open 必须放在该上下文中，以便在我们触发下载时数据完成加载。
也就是说，有两种方法可以做到这一点。正如文档所建议的那样，该服务负责获取和映射数据：
//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);
}
然后，在我们刚刚订阅和处理映射数据的组件上。有两种可能性。 第一个，如原始 post 中所建议，但如 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 文件，即使触发了下载（所以这回答了问题），文件也已损坏。 用于 避免文件损坏。
如果您不需要在请求中添加 headers，要在 Angular2 中下载文件，您可以执行 simple (KISS PRINCIPLE):
window.location.href='http://example.com/myuri/report?param=x';
在你的组件中。
我分享对我有帮助的解决方案（非常感谢任何改进）
在您的 服务上 'pservice' :
getMyFileFromBackend(typeName: string): Observable<any>{
let param = new URLSearchParams();
param.set('type', typeName);
// setting 'responseType: 2' tells angular that you are loading an arraybuffer
return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
.map(res => res.text())
.catch((error:any) => Observable.throw(error || 'Server error'));
}
组件 部分：
downloadfile(type: string){
this.pservice.getMyFileFromBackend(typename).subscribe(
res => this.extractData(res),
(error:any) => Observable.throw(error || 'Server error')
);
}
extractData(res: string){
// transforme response to blob
let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response
var fileURL = URL.createObjectURL(myBlob);
// Cross your fingers at this point and pray whatever you're used to pray
window.open(fileURL);
}
在组件部分，您在没有订阅响应的情况下调用服务。订阅
有关 openOffice mime 类型的完整列表，请参阅：http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html
通过ajax下载文件总是一个痛苦的过程，我认为最好让服务器和浏览器来完成内容类型协商的工作。
我认为最好有
<a href="api/sample/download"></a>
去做。这甚至不需要任何新的 windows 开场之类的东西。
您示例中的 MVC 控制器可能如下所示：
[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
// ...
return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}
下载 angular 的 *.zip 解决方案 2.4.x：您必须从“@angular/http”导入 ResponseContentType 并将 responseType 更改为 ResponseContentType.ArrayBuffer（默认情况下它ResponseContentType.Json)
getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
let headers = this.setHeaders({
'Content-Type': 'application/zip',
'Accept': 'application/zip'
});
return this.http.get(`${environment.apiUrl}${path}`, {
headers: headers,
search: params,
responseType: ResponseContentType.ArrayBuffer //magic
})
.catch(this.formatErrors)
.map((res:Response) => res['_body']);
}
尝试this！
1 - 安装显示 save/open 文件弹出窗口的依赖项
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);
}
)
这对我有用！
要下载和显示 PDF 文件，非常相似的代码片段如下所示：
private downloadFile(data: Response): void {
let blob = new Blob([data.blob()], { type: "application/pdf" });
let url = window.URL.createObjectURL(blob);
window.open(url);
}
public showFile(fileEndpointPath: string): void {
let reqOpt: RequestOptions = this.getAcmOptions(); // getAcmOptions is our helper method. Change this line according to request headers you need.
reqOpt.responseType = ResponseContentType.Blob;
this.http
.get(fileEndpointPath, reqOpt)
.subscribe(
data => this.downloadFile(data),
error => alert("Error downloading file!"),
() => console.log("OK!")
);
}
这个怎么样？
this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
.catch((err)=>{return [do yourself]})
.subscribe((res:Response)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(res.blob());
a.download = fileName;
// start download
a.click();
})
我可以用它。
不需要额外的包裹。
我得到了一个从 angular 2 下载而不会损坏的解决方案，
使用 spring mvc 和 angular 2
1st- 我的 return 类型是：-ResponseEntity 从 java 结束。在这里，我从控制器发送 byte[] 数组具有 return 类型。
2nd- 将文件保护程序包含在您的工作区中-在索引页中，如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
3rd- 在组件 ts 中编写此代码：
import {ResponseContentType} from '@angular.core';
let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
this.http
.post('/project/test/export',
somevalue,options)
.subscribe(data => {
var mediaType = 'application/vnd.ms-excel';
let blob: Blob = data.blob();
window['saveAs'](blob, 'sample.xls');
});
这将为您提供 xls 文件格式。如果您想要其他格式，请更改媒体类型和具有正确扩展名的文件名。
对于那些使用 Redux 模式的人
我在文件保护程序中添加了@Hector Cuevas 在他的回答中命名的内容。使用 Angular2 v. 2.3.1，我不需要添加 @types/file-saver.
以下示例是将期刊下载为 PDF。
日志操作
public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS,
payload: { referenceId: referenceId }
};
}
public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
payload: { blob: blob }
};
}
期刊影响
@Effect() download$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS)
.switchMap(({payload}) =>
this._journalApiService.downloadJournal(payload.referenceId)
.map((blob) => this._actions.downloadJournalsSuccess(blob))
.catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
);
@Effect() downloadJournalSuccess$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
.map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))
日志服务
public downloadJournal(referenceId: string): Observable<any> {
const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
return this._http.getBlob(url);
}
HTTP 服务
public getBlob = (url: string): Observable<any> => {
return this.request({
method: RequestMethod.Get,
url: url,
responseType: ResponseContentType.Blob
});
};
轴颈减速器
虽然这只设置了我们应用程序中使用的正确状态，但我仍然想添加它以显示完整的模式。
case JournalActions.DOWNLOAD_JOURNALS: {
return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}
case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}
希望对您有所帮助。
这是为寻找如何使用 HttpClient 和文件保护程序的人准备的：
- 安装文件保护程序
npm install file-saver --save
npm install @types/file-saver --save
API 服务 class:
export() {
return this.http.get(this.download_endpoint,
{responseType: 'blob'});
}
组件：
import { saveAs } from 'file-saver';
exportPdf() {
this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}
我正在使用 Angular 4 和 4.3 httpClient 对象。我修改了在 Js 的技术博客中找到的一个答案，它创建了一个 link 对象，用它来进行下载，然后销毁它。
客户：
doDownload(id: number, contentType: string) {
return this.http
.get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}
downloadFile(id: number, contentType: string, filename:string) {
return this.doDownload(id, contentType).subscribe(
res => {
var url = window.URL.createObjectURL(res);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove(); // remove the element
}, error => {
console.log('download error:', JSON.stringify(error));
}, () => {
console.log('Completed file download.')
});
}
this.downloadUrl 的值先前已设置为指向 api。我用它来下载附件，所以我知道 id、contentType 和文件名：
我正在使用 MVC api 到 return 文件：
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public FileContentResult GetAttachment(Int32 attachmentID)
{
Attachment AT = filerep.GetAttachment(attachmentID);
if (AT != null)
{
return new FileContentResult(AT.FileBytes, AT.ContentType);
}
else
{
return null;
}
}
附件 class 如下所示：
public class Attachment
{
public Int32 AttachmentID { get; set; }
public string FileName { get; set; }
public byte[] FileBytes { get; set; }
public string ContentType { get; set; }
}
filerep 存储库return来自数据库的文件。
希望这对某人有所帮助:)
对于较新的 angular 版本：
npm install file-saver --save
npm install @types/file-saver --save
import {saveAs} from 'file-saver';
this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
.subscribe(blob => {
saveAs(blob, 'download.pdf');
});
let headers = new Headers({
'Content-Type': 'application/json',
'MyApp-Application': 'AppName',
'Accept': 'application/vnd.ms-excel'
});
let options = new RequestOptions({
headers: headers,
responseType: ResponseContentType.Blob
});
this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
.subscribe(data => {
if (navigator.appVersion.toString().indexOf('.NET') > 0)
window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");
else {
var a = document.createElement("a");
a.href = URL.createObjectURL(data.blob());
a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
a.click();
}
this.ui_loader = false;
this.selectedexport = 0;
}, error => {
console.log(error.json());
this.ui_loader = false;
document.getElementById("exceptionerror").click();
});
如果你尝试调用你内部的新方法会更好subscribe
this._reportService.getReport()
.subscribe((data: any) => {
this.downloadFile(data);
},
(error: any) => сonsole.log(error),
() => console.log('Complete')
);
我们需要在 downloadFile(data) 函数中创建 block, link, href and file name
downloadFile(data: any, type: number, name: string) {
const blob = new Blob([data], {type: 'text/csv'});
const dataURL = window.URL.createObjectURL(blob);
// 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(blob);
return;
}
const link = document.createElement('a');
link.href = dataURL;
link.download = 'export file.csv';
link.click();
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(dataURL);
}, 100);
}
}
在步骤 2 中使用文件保护程序和 HttpClient 更新 Hector 的回答：
public downloadFile(file: File): Observable<Blob> {
return this.http.get(file.fullPath, {responseType: 'blob'})
}
这是我在我的案例中所做的事情 -
// 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"));
}
解决方案参考自- here
简单的把url写成href如下。
<a href="my_url">Download File</a>
<a href="my_url" download="myfilename">Download file</a>
my_url 应该有相同的来源，否则它将重定向到那个位置
我今天遇到了同样的情况，我不得不下载一个pdf文件作为附件（该文件不应该在浏览器中呈现，而是下载）。为了实现这一点，我发现我必须在 Angular Blob 中获取文件，同时在响应中添加 Content-Disposition header。
这是我能得到的最简单的 (Angular 7):
服务内部：
getFile(id: String): Observable<HttpResponse<Blob>> {
return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}
然后，当我需要下载组件中的文件时，我可以简单地：
fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);
更新：
从服务中删除了不必要的 header 设置
如果只把参数传给一个URL，可以这样：
downloadfile(runname: string, type: string): string {
return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}
在接收参数的服务中
您也可以直接从使用下载属性的模板下载文件，并且 [attr.href] 您可以从组件中提供 属性 值。
这个简单的解决方案应该适用于大多数浏览器。
<a download [attr.href]="yourDownloadLink"></a>
This 回答建议您不能直接使用 AJAX 下载文件，主要是出于安全原因。所以我将描述我在这种情况下所做的事情，
01. 在 component.html 文件中的锚标记中添加 href 属性，
例如：-
<div>
<a [href]="fileUrl" mat-raised-button (click)='getGenaratedLetterTemplate(element)'> GENARATE </a>
</div>
02. 在 component.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);
}
Note: This answer will work if you are getting an error "OK" with status code 200
好吧，我写了一段代码，灵感来自上述许多答案，在服务器发送内容配置 header 而没有任何 third-party 的文件的大多数情况下，这些代码应该很容易工作安装，rxjs 和 angular.
除外
首先，如何从组件文件中调用代码
this.httpclient.get(
`${myBackend}`,
{
observe: 'response',
responseType: 'blob'
}
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));
如您所见，它基本上是来自 angular 的平均后端调用，有两个变化
- 我正在观察响应而不是 body
- 我明确表示响应是一个 blob
从服务器获取文件后，我原则上将保存文件的整个任务委托给辅助函数，我将其保存在一个单独的文件中，然后导入到我需要的任何组件中
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();
}
好了，再也没有神秘的 GUID 文件名了！我们可以使用服务器提供的任何名称，而不必在客户端中明确指定它，或者覆盖服务器提供的文件名（如本例所示）。
此外，如果需要，可以很容易地更改从 content-disposition 中提取文件名的算法以满足他们的需要，并且其他所有内容都不会受到影响 - 如果在此类提取过程中出现错误，它只会通过 'null' 作为文件名。
正如另一个答案已经指出的那样，IE 一如既往地需要一些特殊处理。但是随着几个月后 chromium edge 的出现，我在构建新应用程序时不会担心这一点（希望如此）。
还有撤销 URL 的问题，但我对此有点 not-so-sure，所以如果有人可以在评论中提供帮助，那就太棒了。
如果标签页打开和关闭时没有下载任何东西，我尝试使用模拟锚点进行跟踪 link 并且成功了。
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+ 的不兼容性（如果您关心的话）。
这是完整的示例，后面有应用程序部分和服务部分。请注意，我们设置 observe: "response" 以捕获文件名的 header。另请注意，Content-Disposition header 必须由服务器设置和公开，否则当前的 Angular HttpClient 将不会传递它。我在下面添加了一段 dotnet core 代码。
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 核心，具有 Content-Disposition 和 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 网页 API
您可以 return 来自服务器的 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>
虽然问题很老，但 none 的答案是可行的。
据我所知，所有文件都首先加载到内存中，然后保存。
这样我们：
- 导致延迟，必须为其实现自定义加载。
- 加载内存中的文件，这意味着对于大文件浏览器会崩溃。
- 不要使用实现的浏览器下载功能。
前端侧够简单(Angular12):
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);
}
可以从数据库（如果您在其中保存文件信息）或文件系统中检索文件内容类型和名称。
内容类型是从扩展中解析出来的。
我这样写到流中：
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);
}
}
请记住，出于演示目的我已经简化了我的实现，因此尚未经过测试。
我有一个 WebApi/MVC 应用程序，我正在为其开发一个 angular2 客户端（以替换 MVC）。我在理解 Angular 如何保存文件时遇到了一些麻烦。
请求没问题（在 MVC 上工作正常，我们可以记录收到的数据）但我不知道如何保存下载的数据（我主要遵循与 [=16= 中相同的逻辑]).我确信它非常简单，但到目前为止我根本没有掌握它。
组件函数的代码如下。我尝试了不同的替代方法，据我所知，blob 方式应该是可行的方式，但是 URL 中没有函数 createObjectURL。我什至在 window 中找不到 URL 的定义，但显然它存在。如果我使用 FileSaver.js module 我会得到同样的错误。所以我猜这是最近发生了变化或尚未实施的事情。如何触发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);
}
问题在于可观察对象在另一个上下文中运行，因此当您尝试创建 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 var，如果没有打开新的 window 请检查您是否已经导入 'rxjs/Rx' ;
import 'rxjs/Rx' ;
希望对您有所帮助
如 subscribe 是异步的 运行 并且 open 必须放在该上下文中，以便在我们触发下载时数据完成加载。
也就是说，有两种方法可以做到这一点。正如文档所建议的那样，该服务负责获取和映射数据：
//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);
}
然后，在我们刚刚订阅和处理映射数据的组件上。有两种可能性。 第一个，如原始 post 中所建议，但如 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 文件，即使触发了下载（所以这回答了问题），文件也已损坏。
如果您不需要在请求中添加 headers，要在 Angular2 中下载文件，您可以执行 simple (KISS PRINCIPLE):
window.location.href='http://example.com/myuri/report?param=x';
在你的组件中。
我分享对我有帮助的解决方案（非常感谢任何改进）
在您的 服务上 'pservice' :
getMyFileFromBackend(typeName: string): Observable<any>{
let param = new URLSearchParams();
param.set('type', typeName);
// setting 'responseType: 2' tells angular that you are loading an arraybuffer
return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
.map(res => res.text())
.catch((error:any) => Observable.throw(error || 'Server error'));
}
组件 部分：
downloadfile(type: string){
this.pservice.getMyFileFromBackend(typename).subscribe(
res => this.extractData(res),
(error:any) => Observable.throw(error || 'Server error')
);
}
extractData(res: string){
// transforme response to blob
let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response
var fileURL = URL.createObjectURL(myBlob);
// Cross your fingers at this point and pray whatever you're used to pray
window.open(fileURL);
}
在组件部分，您在没有订阅响应的情况下调用服务。订阅 有关 openOffice mime 类型的完整列表，请参阅：http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html
通过ajax下载文件总是一个痛苦的过程，我认为最好让服务器和浏览器来完成内容类型协商的工作。
我认为最好有
<a href="api/sample/download"></a>
去做。这甚至不需要任何新的 windows 开场之类的东西。
您示例中的 MVC 控制器可能如下所示：
[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
// ...
return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}
下载 angular 的 *.zip 解决方案 2.4.x：您必须从“@angular/http”导入 ResponseContentType 并将 responseType 更改为 ResponseContentType.ArrayBuffer（默认情况下它ResponseContentType.Json)
getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
let headers = this.setHeaders({
'Content-Type': 'application/zip',
'Accept': 'application/zip'
});
return this.http.get(`${environment.apiUrl}${path}`, {
headers: headers,
search: params,
responseType: ResponseContentType.ArrayBuffer //magic
})
.catch(this.formatErrors)
.map((res:Response) => res['_body']);
}
尝试this！
1 - 安装显示 save/open 文件弹出窗口的依赖项
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'
解析 blobimport {saveAs as importedSaveAs} from "file-saver";
this.myService.downloadFile(this.id).subscribe(blob => {
importedSaveAs(blob, this.fileName);
}
)
这对我有用！
要下载和显示 PDF 文件，非常相似的代码片段如下所示：
private downloadFile(data: Response): void {
let blob = new Blob([data.blob()], { type: "application/pdf" });
let url = window.URL.createObjectURL(blob);
window.open(url);
}
public showFile(fileEndpointPath: string): void {
let reqOpt: RequestOptions = this.getAcmOptions(); // getAcmOptions is our helper method. Change this line according to request headers you need.
reqOpt.responseType = ResponseContentType.Blob;
this.http
.get(fileEndpointPath, reqOpt)
.subscribe(
data => this.downloadFile(data),
error => alert("Error downloading file!"),
() => console.log("OK!")
);
}
这个怎么样？
this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
.catch((err)=>{return [do yourself]})
.subscribe((res:Response)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(res.blob());
a.download = fileName;
// start download
a.click();
})
我可以用它。
不需要额外的包裹。
我得到了一个从 angular 2 下载而不会损坏的解决方案， 使用 spring mvc 和 angular 2
1st- 我的 return 类型是：-ResponseEntity 从 java 结束。在这里，我从控制器发送 byte[] 数组具有 return 类型。
2nd- 将文件保护程序包含在您的工作区中-在索引页中，如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
3rd- 在组件 ts 中编写此代码：
import {ResponseContentType} from '@angular.core';
let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
this.http
.post('/project/test/export',
somevalue,options)
.subscribe(data => {
var mediaType = 'application/vnd.ms-excel';
let blob: Blob = data.blob();
window['saveAs'](blob, 'sample.xls');
});
这将为您提供 xls 文件格式。如果您想要其他格式，请更改媒体类型和具有正确扩展名的文件名。
对于那些使用 Redux 模式的人
我在文件保护程序中添加了@Hector Cuevas 在他的回答中命名的内容。使用 Angular2 v. 2.3.1，我不需要添加 @types/file-saver.
以下示例是将期刊下载为 PDF。
日志操作
public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS,
payload: { referenceId: referenceId }
};
}
public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
payload: { blob: blob }
};
}
期刊影响
@Effect() download$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS)
.switchMap(({payload}) =>
this._journalApiService.downloadJournal(payload.referenceId)
.map((blob) => this._actions.downloadJournalsSuccess(blob))
.catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
);
@Effect() downloadJournalSuccess$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
.map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))
日志服务
public downloadJournal(referenceId: string): Observable<any> {
const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
return this._http.getBlob(url);
}
HTTP 服务
public getBlob = (url: string): Observable<any> => {
return this.request({
method: RequestMethod.Get,
url: url,
responseType: ResponseContentType.Blob
});
};
轴颈减速器 虽然这只设置了我们应用程序中使用的正确状态，但我仍然想添加它以显示完整的模式。
case JournalActions.DOWNLOAD_JOURNALS: {
return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}
case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}
希望对您有所帮助。
这是为寻找如何使用 HttpClient 和文件保护程序的人准备的：
- 安装文件保护程序
npm install file-saver --save
npm install @types/file-saver --save
API 服务 class:
export() {
return this.http.get(this.download_endpoint,
{responseType: 'blob'});
}
组件：
import { saveAs } from 'file-saver';
exportPdf() {
this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}
我正在使用 Angular 4 和 4.3 httpClient 对象。我修改了在 Js 的技术博客中找到的一个答案，它创建了一个 link 对象，用它来进行下载，然后销毁它。
客户：
doDownload(id: number, contentType: string) {
return this.http
.get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}
downloadFile(id: number, contentType: string, filename:string) {
return this.doDownload(id, contentType).subscribe(
res => {
var url = window.URL.createObjectURL(res);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove(); // remove the element
}, error => {
console.log('download error:', JSON.stringify(error));
}, () => {
console.log('Completed file download.')
});
}
this.downloadUrl 的值先前已设置为指向 api。我用它来下载附件，所以我知道 id、contentType 和文件名： 我正在使用 MVC api 到 return 文件：
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public FileContentResult GetAttachment(Int32 attachmentID)
{
Attachment AT = filerep.GetAttachment(attachmentID);
if (AT != null)
{
return new FileContentResult(AT.FileBytes, AT.ContentType);
}
else
{
return null;
}
}
附件 class 如下所示：
public class Attachment
{
public Int32 AttachmentID { get; set; }
public string FileName { get; set; }
public byte[] FileBytes { get; set; }
public string ContentType { get; set; }
}
filerep 存储库return来自数据库的文件。
希望这对某人有所帮助:)
对于较新的 angular 版本：
npm install file-saver --save
npm install @types/file-saver --save
import {saveAs} from 'file-saver';
this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
.subscribe(blob => {
saveAs(blob, 'download.pdf');
});
let headers = new Headers({
'Content-Type': 'application/json',
'MyApp-Application': 'AppName',
'Accept': 'application/vnd.ms-excel'
});
let options = new RequestOptions({
headers: headers,
responseType: ResponseContentType.Blob
});
this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
.subscribe(data => {
if (navigator.appVersion.toString().indexOf('.NET') > 0)
window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");
else {
var a = document.createElement("a");
a.href = URL.createObjectURL(data.blob());
a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
a.click();
}
this.ui_loader = false;
this.selectedexport = 0;
}, error => {
console.log(error.json());
this.ui_loader = false;
document.getElementById("exceptionerror").click();
});
如果你尝试调用你内部的新方法会更好subscribe
this._reportService.getReport()
.subscribe((data: any) => {
this.downloadFile(data);
},
(error: any) => сonsole.log(error),
() => console.log('Complete')
);
我们需要在 downloadFile(data) 函数中创建 block, link, href and file name
downloadFile(data: any, type: number, name: string) {
const blob = new Blob([data], {type: 'text/csv'});
const dataURL = window.URL.createObjectURL(blob);
// 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(blob);
return;
}
const link = document.createElement('a');
link.href = dataURL;
link.download = 'export file.csv';
link.click();
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(dataURL);
}, 100);
}
}
在步骤 2 中使用文件保护程序和 HttpClient 更新 Hector 的回答：
public downloadFile(file: File): Observable<Blob> {
return this.http.get(file.fullPath, {responseType: 'blob'})
}
这是我在我的案例中所做的事情 -
// 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"));
}
解决方案参考自- here
简单的把url写成href如下。
<a href="my_url">Download File</a>
<a href="my_url" download="myfilename">Download file</a>
my_url 应该有相同的来源，否则它将重定向到那个位置
我今天遇到了同样的情况，我不得不下载一个pdf文件作为附件（该文件不应该在浏览器中呈现，而是下载）。为了实现这一点，我发现我必须在 Angular Blob 中获取文件，同时在响应中添加 Content-Disposition header。
这是我能得到的最简单的 (Angular 7):
服务内部：
getFile(id: String): Observable<HttpResponse<Blob>> {
return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}
然后，当我需要下载组件中的文件时，我可以简单地：
fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);
更新：
从服务中删除了不必要的 header 设置
如果只把参数传给一个URL，可以这样：
downloadfile(runname: string, type: string): string {
return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}
在接收参数的服务中
您也可以直接从使用下载属性的模板下载文件，并且 [attr.href] 您可以从组件中提供 属性 值。
这个简单的解决方案应该适用于大多数浏览器。
<a download [attr.href]="yourDownloadLink"></a>
This 回答建议您不能直接使用 AJAX 下载文件，主要是出于安全原因。所以我将描述我在这种情况下所做的事情，
01. 在 component.html 文件中的锚标记中添加 href 属性，
例如：-
<div>
<a [href]="fileUrl" mat-raised-button (click)='getGenaratedLetterTemplate(element)'> GENARATE </a>
</div>
02. 在 component.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);
}
Note: This answer will work if you are getting an error "OK" with status code 200
好吧，我写了一段代码，灵感来自上述许多答案，在服务器发送内容配置 header 而没有任何 third-party 的文件的大多数情况下，这些代码应该很容易工作安装，rxjs 和 angular.
除外首先，如何从组件文件中调用代码
this.httpclient.get(
`${myBackend}`,
{
observe: 'response',
responseType: 'blob'
}
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));
如您所见，它基本上是来自 angular 的平均后端调用，有两个变化
- 我正在观察响应而不是 body
- 我明确表示响应是一个 blob
从服务器获取文件后，我原则上将保存文件的整个任务委托给辅助函数，我将其保存在一个单独的文件中，然后导入到我需要的任何组件中
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();
}
好了，再也没有神秘的 GUID 文件名了！我们可以使用服务器提供的任何名称，而不必在客户端中明确指定它，或者覆盖服务器提供的文件名（如本例所示）。 此外，如果需要，可以很容易地更改从 content-disposition 中提取文件名的算法以满足他们的需要，并且其他所有内容都不会受到影响 - 如果在此类提取过程中出现错误，它只会通过 'null' 作为文件名。
正如另一个答案已经指出的那样，IE 一如既往地需要一些特殊处理。但是随着几个月后 chromium edge 的出现，我在构建新应用程序时不会担心这一点（希望如此）。 还有撤销 URL 的问题，但我对此有点 not-so-sure，所以如果有人可以在评论中提供帮助，那就太棒了。
如果标签页打开和关闭时没有下载任何东西，我尝试使用模拟锚点进行跟踪 link 并且成功了。
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+ 的不兼容性（如果您关心的话）。
这是完整的示例，后面有应用程序部分和服务部分。请注意，我们设置 observe: "response" 以捕获文件名的 header。另请注意，Content-Disposition header 必须由服务器设置和公开，否则当前的 Angular HttpClient 将不会传递它。我在下面添加了一段 dotnet core 代码。
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 核心，具有 Content-Disposition 和 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 网页 API
您可以 return 来自服务器的 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>
虽然问题很老，但 none 的答案是可行的。 据我所知，所有文件都首先加载到内存中，然后保存。 这样我们：
- 导致延迟，必须为其实现自定义加载。
- 加载内存中的文件，这意味着对于大文件浏览器会崩溃。
- 不要使用实现的浏览器下载功能。
前端侧够简单(Angular12):
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);
}
可以从数据库（如果您在其中保存文件信息）或文件系统中检索文件内容类型和名称。 内容类型是从扩展中解析出来的。
我这样写到流中：
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);
}
}
请记住，出于演示目的我已经简化了我的实现，因此尚未经过测试。