Angular Create Link to downloaded zip file in ngfor [duplicate]

I need to download a ZIP file and put a link to this file into my application, so user can click on it.

Current Code:

Service:

public downloadFileWithAuthorization(urlOfFile: string, user: string, password: string) : Observable<any> {
let headerParams: HttpHeaders = new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Basic " + btoa(user + ":" + password),
});

return this.http.get(urlOfFile, {
reportProgress: false,
observe: "events",
headers: headerParams,
responseType: "blob"
})
}


Resulting BLOB should be stored in an entity with some additional values:

export class URLEntity {
path?: string;
name?: string;
fileContent?: any;
fileUrl?: string;
}


After Download and assignment to zipFile[0] I create a link to it using createObjectUrl:

getDownloadFile() {
this.downloadFileSub = this.downloadService.downloadFileWithAuthorization( this.emailMessage!.downloadURL![0].path!, this.user, this.password).subscribe(
{
next: value => {
this.zipFile[0].fileContent = value.body;
this.zipFile[0].fileUrl = window.URL.createObjectURL(this.zipFile[0].fileContent);

},
error: err => {
new ErrorMessage(err.message, this.messageService).provide();


}
}
);
}


and display in HTML form using ngFor, as from another code parts multiple files can be provided for the same view:

<div *ngFor="let urlentity of zipFile">
<button pButton pRipple icon="p-button-icon pi pi-file-edit" link="true"
class="p-button-rounded p-button-success mr-2">
<a href="{{urlentity.fileUrl}}" target="_blank" rel="noopener noreferrer">{{urlentity.name}}</a>
</button>
</div>


My problem now is that this in general works, I can download and open the ZIP file. However, in the console there is an error:

Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Seems like this line

this.zipFile[0].fileUrl = window.URL.createObjectURL(this.zipFile[0].fileContent);


is not correct. Any idea how to solve it?

Continue reading...