Tengo el siguiente código para descargar archivos PDF desde el backend:
const link = document.createElement('a') link.href = URL.createObjectURL(blob) link.setAttribute('target', '_blank') link.setAttribute('download', file_name) link.click() link.remove() setTimeout(() => window.URL.revokeObjectURL(url), 100)Funciona en Chrome como se esperaba, y creo que antes funcionó en Firefox, pero ahora Firefox abre el archivo en la misma pestaña en lugar de descargarlo, ignorando los atributos de destino y descarga.
Este es el comportamiento esperado para 98 y superiores. Los archivos PDF están configurados para abrirse en Firefox de forma predeterminada.
Si cambia el tipo de mime que le da al Blob a "aplicación/flujo de octetos" o apunta al enlace cuyo href asigna a un iframe dentro de su página, creo que recuperará el comportamiento anterior.
Cuando se aplica el atributo de descarga, se trata de la misma manera que un encabezado "Disposición de contenido: archivo adjunto" enviado por el servidor. Los desarrolladores de Firefox creen que las preferencias del usuario deberían ganarle a lo que dice el servidor, independientemente de si el usuario ha indicado que quiere que los archivos PDF se abran en una aplicación externa (Acrobat o w/e), se guarden automáticamente en el disco o se abran en Firefox.
Fuente: https://bugzilla.mozilla.org/show_bug.cgi?id=1756980
Editar:
Firefox abre el archivo en la misma pestaña e ignora el atributo de destino, es un error.
Fuente: https://bugzilla.mozilla.org/show_bug.cgi?id=1759916
Este es un ejemplo que usa fetch para un blob existente. Es posible que desee omitir la primera URL.createObjectURL y construir un nuevo Blob directamente desde el archivo.
El uso de este enfoque descarga pdf en Firefox, pero lo abre en una nueva pestaña del visor de PDF de todos modos.
const blobUrl = URL.createObjectURL(blob); const filename = 'attachment.pdf'; fetch(blobUrl).then(res => res.arrayBuffer()).then(res => { const file = new Blob([res], {type: 'application/octet-stream'}); const fileURL = URL.createObjectURL(file); const link = document.createElement('a'); link.href = fileURL; link.download = filename; link.click(); link.remove(); });