El atributo de descarga de Chrome no funciona para reemplazar el nombre original

He experimentado un comportamiento inesperado de Chrome desde la versión más reciente: mientras que en Firefox, este código funciona perfectamente bien:

<a 
  id="playlist"
  class="button"
  download="Name.xspf" 
  href="data:application/octet-stream;base64,PD94ANDSOON" 
  style="display: inline;">
    Download Me
</a>

No funciona en Chrome (simplemente descargando un archivo llamado “Descargar”), pero ha funcionado bastante bien antes. ¿Qué tengo que cambiar para que vuelva a funcionar?

Después de algunas investigaciones, finalmente encontré tu problema.

<a>Atributo de descarga:

Si el encabezado HTTP Content-Disposition: está presente y da un nombre de archivo diferente a este atributo, el encabezado HTTP tiene prioridad sobre este atributo.

Si este atributo está presente y Content-Disposition: está configurado en línea, Firefox da prioridad a Content-Dispositioncomo en el caso del nombre de archivo, mientras que Chrome da prioridad al atributo de descarga.

Fuente

Encabezado HTTP Content-Disposition

Al leer los comentarios, tuve el mismo problema que @buffer-overflow y encontré esto en el problema:

Supongo que la página web y la descarga tienen diferentes orígenes. Ya no respetamos el nombre de archivo sugerido del atributo de descarga para las solicitudes de origen cruzado. Al hacer clic en el enlace aún se inicia una descarga. Pero el nombre del archivo solo se deriva de factores que dependen únicamente del servidor (por ejemplo, encabezado de disposición de contenido en la respuesta y la URL).

Así que no hay posibilidad de que pueda hacer que funcione… 🙁

Tuve este problema con wordpress, el problema es que wordpress genera la ruta completa del archivo, y en la etiqueta hay que eliminar el nombre de dominio completo y agregar una ruta relativa

Ejemplo, en lugar de:

<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >

Tienes que hacer esto:

<a href="/wp-content/uploads/file.mp4" download="file.mp4">

Esto hará que funcione

Este es el comportamiento actual en Chrome a partir de 16 ago, 2021

Si está llamando a una API como esta: http://localhost:9000/api/v1/service/email/attachment/dummy.pdf

Chrome intentará analizar el último valor del parámetro de ruta e ignorará cualquier valor pasado a attachment atributo de a enlace si Content-Disposition no está configurado o está configurado para inline del servidor, en cuyo caso el archivo pdf tendrá el nombre ficticio.pdf

Si Content-Disposition se establece en attachmentChrome guardará el archivo con el filename valor del encabezado Content-Disposition.

Eso es si el servidor respondiera así:

res.setHeader(
  "Content-disposition",
  "attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");

El archivo se guardaría como servidor-ficticio.pdf independientemente de la presencia del atributo de descarga.

Tengo una solución simple con respecto a este problema. Solo necesita poner su archivo html en un servidor como Apache usando el control xampp y así sucesivamente. Porque el atributo de descarga funciona correctamente a través de un servidor.

<a download href="https://stackoverflow.com/questions/23872902/data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>

¿Está buscando los archivos a través de un servidor web o su sistema de archivos local? ¿La barra de URL del navegador comienza con http:// o file:///? Acabo de realizar algunas pruebas en Chrome y, aunque descargará el archivo, no respeta el valor del atributo de descarga cuando usa el archivo local.

Si comienza a alojarlo en un servidor web, esto comenzará a funcionar. Si solo está haciendo esto por sí mismo en su computadora, consulte WAMP para Windows o MAMP para macOS para comenzar con Apache.

Recomiendo usar el file-saver Paquete NPM para implementar o forzar la descarga.

// 1.
npm i file-saver // install via npm or
yarn add file-saver // install via yarn

// 2.
import { saveAs } from 'file-saver'

// 3. 
saveAs('https://httpbin.org/image', 'image.jpg')

Referencias

• https://www.npmjs.com/package/file-saver
• https://www.npmjs.com/package/file-saver#saving-urls // URL directa a Guardar direcciones URL
• https://www.javascripting.com/view/filesaver-js