es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Descargar archivo Word .docx como Blob desde Angular en dispositivos móviles.

01 Jun, 2023 Programación

Estoy tratando de descargar un archivo .docx desde la API REST (.NET Core FileContentResult) en una aplicación Angular. Todo funciona bien en PC, pero hay un problema al descargar archivos .docx en el navegador VMware Workspace ONE (no he probado navegadores estándar como Chrome o Safari, parece que solo se utiliza Android WebView). Es una aplicación de la empresa y este navegador es el único permitido.

El problema solo ocurre con los archivos .docx. Los archivos como PDF, .doc y .xlsx (creados por ClosedXML) funcionan bien.

Llamada a la API REST (también probé con “arraybuffer” en lugar de “blob” y con la creación de un objeto Blob en el cliente, pero el problema persiste)

this.httpClient.get(requestUrl, {
responseType: ‘blob’,
observe: ‘response’
});

Luego, guardo el cuerpo de la respuesta con FileSaver.js.

generateDocument(file: string | Blob, name: string): void {
FileSaver.saveAs(file, name);
}

También intenté con un enfoque que crea un enlace y hace clic en él (no funciona) y con la solución de utilizar window.open(blobUrl) (no funciona).

EDITO:
– Me han informado de que no funciona en absoluto en iOS con el mismo navegador. Los usuarios reciben el mensaje de error “Enlace no válido”.

¿Alguien puede ayudarme con este problema? Gracias.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para descargar archivos .docx desde una API REST en una aplicación Angular

    Si tienes problemas al descargar archivos .docx desde una API REST en una aplicación Angular, prueba los siguientes pasos:

    1. Cambia responseType de ‘blob’ a ‘arraybuffer’. El código modificado se verá así:
    this.httpClient.get(requestUrl, {
  responseType: 'arraybuffer',
  observe: 'response'
});
    1. Crea un objeto Blob en el lado del cliente y pásalo al método de guardado de archivos. El código para esto será algo como:
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
this.generateDocument(blob, fileName);
    1. Utiliza la última versión de FileSaver.js y asegúrate de que está importada correctamente.

    Si esta solución aún no funciona, intenta verificar si hay algún problema con el navegador VMware Workspace ONE Web (el único navegador permitido en tu empresa) o el navegador iOS también, y contacta con los respectivos equipos de soporte para resolver el problema.

    ¡Espero que esto ayude!

Comments are closed.