Tengo una aplicación Angular donde los usuarios pueden descargar algunos documentos (.jpg, .mp4 y .pdf) que cargaron. Básicamente, la descarga del archivo funciona de esta manera: se llama a un servicio que devuelve información sobre el archivo como el nombre, el tipo, el tamaño y el contenido del mismo en base64.
Este es el método de descarga en Componente cuando el usuario hace clic en el botón de descarga:
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); }); }Funciona perfectamente para archivos de hasta 12mb. Pero cuando los archivos son más grandes, la descarga no se inicia, el servicio trae el archivo correctamente, pero no sé por qué no se inicia la descarga. No se muestra ningún error en la consola del navegador.
Este problema solo ocurre con Firefox porque en Google Chrome funciona bien. ¿Alguna idea de cómo puedo solucionar esto?
Resolví esto instalando FileSaver.js . Se utiliza para propósitos de archivos grandes.
npm install file-saver --saveY cambié mi método de descarga a:
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 }); }