web-dev-qa-db-fra.com

L'attribut de téléchargement avec un nom de fichier ne fonctionne pas?

L'attribut de téléchargement est utilisé pour que les navigateurs téléchargent la ressource vers laquelle une ancre pointe plutôt que d'y naviguer. Et en option, un nouveau nom de fichier pour le fichier téléchargé peut être fourni.

Notez que tous les navigateurs ne le prennent pas en charge. Voir http://caniuse.com/#feat=download

Supposons que nous disposions du lien d'ancrage suivant:

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

En cliquant sur le lien, je m'attendrais à télécharger le fichier avec le nom, video.mp4. Mais le nom de fichier réel, qui est oceans-clip.mp4, a été utilisé pour le fichier téléchargé. Savez-vous pourquoi le nouveau nom de fichier n'a pas été utilisé ici? (J'ai testé cela avec Chrome)

Merci!

htmlhtml5href
18
Lunejy

Selon référence d'élément HTML -> [a]

Peut être utilisé avec blob: URLs et data: URLs, pour permettre aux utilisateurs de télécharger facilement du contenu généré par programmation à l'aide de JavaScript (par exemple, une image créée à l'aide d'une application Web de dessin en ligne).

Si l'en-tête HTTP Content-Disposition: est présent et donne un nom de fichier différent de cet attribut, l'en-tête HTTP a priorité sur cet attribut.

Si cet attribut est présent et que Content-Disposition: est défini sur inline, Firefox donne la priorité à Content-Disposition, comme dans le cas du nom de fichier, tandis que Chrome donne la priorité à l'attribut de téléchargement.

Cet attribut n'est honoré que pour les liens vers des ressources de même origine.

Ce n'est pas de la même origine, donc ça ne marchera pas.

27
Roger Dwan

En réalité, cela est possible avec JavaScript, bien que la prise en charge du navigateur soit inégale. Vous pouvez utiliser XHR2 pour télécharger le fichier du serveur vers le navigateur en tant qu'objet blob, créer une URL vers l'objet blob, créer une ancre avec sa propriété href et la définir sur cette URL, définir la propriété de téléchargement sur le nom de fichier que vous souhaitez. être, puis cliquez sur le lien. Cela fonctionne dans Google Chrome, mais je n'ai pas vérifié la prise en charge dans d'autres navigateurs.

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();
13
Himanshu Vaghela