We have a RestAPI which is downloading a BLOB, in this case it is a DATABASE file but it could be anything else like a PDF file or a DOC file,
Most of the time the method is working well but sometimes we see not the downloaded file in chromes footer.
My question is, which is the best way to download a file working on android app and also on browser, our solution for now is something like that.
download.html
<a #downloadBlob style="display:none;">downloadBlob</a>
download.component.ts
@ViewChild('downloadBlob') downloadBlobElementRef: ElementRef;
this.exportStore.export(this.fromDate, this.toDate)
.subscribe(
(exportBlob) => {
// data found
if (exportBlob) {
let url = window.URL.createObjectURL(exportBlob);
this.renderer.setElementAttribute(this.downloadBlob, 'href', url);
this.renderer.setElementAttribute(this.downloadBlob, 'download', 'recordings.db');
this.downloadBlob.click();
window.URL.revokeObjectURL(url);
this.renderer.setElementAttribute(this.downloadBlob, 'href', '');
this.renderer.setElementAttribute(this.downloadBlob, 'download', '');
} else { // no data found
this.alertNotDataFound();
}
},
(error) => {
}
);
}
Not sure if Native File Transfer plugin should be a solution because we need XHR request with headers and cookies. Plugin supports Headers but I have to store them which could be a problem I think there could be a browser out of the box solution?