html - link - Descargar atributo con un nombre de archivo no funciona?

download html5

Question

El atributo de descarga se utiliza para hacer que los navegadores descarguen el recurso que un punto de anclaje en lugar de navegar hacia él. Y como opción, se puede proporcionar un nuevo nombre de archivo para el archivo descargado.

Tenga en cuenta que no todos los navegadores admiten esto. Ver http://caniuse.com/#feat=download

Supongamos que tenemos el siguiente enlace de anclaje:

<a href="http://video-js.zencoder.com/oceans-clip.mp4" download="video.mp4"> download </a>

Al hacer clic en el enlace, esperaría descargar el archivo con el nombre, video.mp4. Pero el nombre del archivo real, que es oceans-clip.mp4, se usó para el archivo descargado. ¿Sabes por qué el nuevo nombre de archivo no se usó aquí? (He probado esto con Chrome)

¡Gracias!

Answer 1

Esto realmente es posible con JavaScript, aunque el soporte del navegador sería irregular. Puede usar XHR2 para descargar el archivo del servidor al navegador como un Blob, crear una URL al Blob, crear un ancla con su propiedad href y establecerla en esa URL, configurar la propiedad de descarga al nombre de archivo que desee. ser, y luego haga clic en el enlace. Esto funciona en Google Chrome, pero no he verificado el soporte en otros navegadores.

window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest(),
a = document.createElement(''a''), file;
xhr.open(''GET'', ''someFile'', true);
xhr.responseType = ''blob'';
xhr.onload = function () {
file = new Blob([xhr.response], { type : ''application/octet-stream'' });
a.href = window.URL.createObjectURL(file);
a.download = ''someName.gif''; // Set to whatever file name you want
// Now just click the link you created
// Note that you may have to append the a element to the body somewhere
// for this to work in Firefox
a.click();
};
xhr.send();

Answer 2

Según la referencia del elemento HTML -> [a]

Se puede usar con blob: URL y datos: URL, para facilitar a los usuarios la descarga de contenido que se genera mediante programación mediante JavaScript (por ejemplo, una imagen creada mediante una aplicación web de dibujo en línea).

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: se establece en línea, Firefox le da prioridad a Content-Disposition, como en el caso del nombre de archivo, mientras que Chrome le da prioridad al atributo de descarga.

Este atributo solo se respeta para los enlaces a recursos con el mismo origen.

No es del mismo origen, por lo tanto no funcionará.