let url: string = this.getFullUrl(/api/v1/shipments/${shipmentId}/attachments/${attachmentId});
let headers: HttpHeaders = new HttpHeaders().set(‚Authorization‘, this.token);
return this._httpClient.get(url, {
headers: headers,
responseType: ‚blob‘ // very important that this is set
})
.pipe(
catchError(this.handleError)
);
}
createObjectURL went into deprecation 7 years ago and has been effectively deprecated 2 years ago this guide has been unusable for two years. please update it.
This is great, even years later. Had exactly this scenario, but most examples have you use href to api call which doesn’t work in real authentication scenarios. Thanks!
Shouldn’t this line
const blob = await this.service.downloadZip(this.id);
be
const blob = await this.service.downloadResource(this.id);
You are right… probably a mistake I introduced for adjusting the code for the blog post
Aren’t you describing an upload here? I would think a download is pulling it into the browser?
Yes this is a download
Thank you.
For some reason it feels like there should be a simpler way to download an excel file……
It looks like this doesn’t work with IE, have you noticed that?
Add check for IE
if (navigator.appVersion.toString().indexOf(‚.NET‘) > 0)
window.navigator.msSaveBlob(blob, filename);
else
{….
https://stackoverflow.com/a/25424299/7825538
Thank you for this. You saved the day. Although my http get is without and only with ‚blob‘. There is some angular 5 issue with this.
Whole service method:
getShipmentAttachment(shipmentId: number, attachmentId: number): Observable {
let url: string = this.getFullUrl(
/api/v1/shipments/${shipmentId}/attachments/${attachmentId});let headers: HttpHeaders = new HttpHeaders().set(‚Authorization‘, this.token);
return this._httpClient.get(url, {
headers: headers,
responseType: ‚blob‘ // very important that this is set
})
.pipe(
catchError(this.handleError)
);
}
This won’t work at all in Angular 6 typescript.
Also why are you using promises when Angular 2 + has Observables ?
My service function:
getEvidenceFile(id: number, getFileContent: boolean) {
return this.http.get(environment.baseUrl + ‚upload‘ + ‚/‘ + id + ‚,‘ + getFileContent, {responseType: ‚blob‘ as ‚json‘})
.map(res => res);
}
My component function called from the selected item of a dropdown…
dropDownValue(event: any) {
// const blob = await this.callService.getEvidenceFile(event.target.value, true);
// const url = window.URL.createObjectURL(blob);
this.callService.getEvidenceFile(event.target.value, true).subscribe(data => {
var binaryData = [];
binaryData.push(data);
var downloadLink = document.createElement(‚a‘);
downloadLink.href = window.URL.createObjectURL(new Blob(binaryData));
document.body.appendChild(downloadLink);
downloadLink.click();
});
}
[ts] Property ‚URL‘ does not exist on type ‚ (this: Observable , windowBoundaries: Observable) => Observable<Observable>‘.
This was very helpful.
> I like working with Promises and async in my code…
+1 – friends don’t let friends do rx
Thaaaaaaaaaaank’s man i missed this: responseType: ‚blob‘ as ‚json‘
Now works perfectly thanks a million
It works with safari for the iPhone also?
Sorry, did not specifically check. But I assume it does.
createObjectURL went into deprecation 7 years ago and has been effectively deprecated 2 years ago this guide has been unusable for two years. please update it.
Hi tatsu,
Do you have any source for this? I looked at the Mozilla documentation for
URL.createObjectURLand there is no sign of a deprecation: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL with full support in all major browsers.There seems to be a change however, when using a MediaStream with an HTMLMediaElement (like Video) which used to utilize
URL.createObjectURL, but doesn’t any more : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObjectMaybe this is what you are referring to?
Any idea how to also rename the files within the zip file? Thanks!
This is great, even years later. Had exactly this scenario, but most examples have you use href to api call which doesn’t work in real authentication scenarios. Thanks!