I have a Angular app where users can download some documents(.jpg, .mp4 and .pdf) that they uploaded. Basically the download of the file works in this way: A service is called which returns some information about the file as name, type, size and the content of it in base64.
This is the download method in Component when the user clicks on the download button:
downloadDocument(doc: Document) {
this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {
var link = document.createElement("a");
link.download = resp.fileName;
link.target = "_blank";
// Construct the URI
link.href = resp.url;//Url is the content of the file in base64
document.body.appendChild(link);
link.click();
// Cleanup the DOM
document.body.removeChild(link);
});
}It's working perfectly for files up to 12mb. But when files are bigger the download doesn't start, the service brings the file correctly but I don't know why the download doesn't start. No error is shown in the browser console.
This problem only happens with Firefox because in Google Chrome it works fine. Any idea on how can I solve this?
I solved this by installing FileSaver.js. It's used for large files purposes.
npm install file-saver --saveAnd changed my download method to:
downloadDocument(doc: Document) {
this._subDownDocument = this.service.getDocument(doc).subscribe((resp: Document) => {
//Url is the content of the file in base64
fileSaver.saveAs(this.b64toBlob(resp.url, resp.type), resp.fileName);
});
}
private b64toBlob(dataURI, type) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: type });
}