web-dev-qa-db-fra.com

Télécharger le fichier url

Je suis en train de jouer avec l’idée de créer un utilitaire Zip/Unzip entièrement basé sur JavaScript, accessible à tous à partir d’un navigateur. Ils peuvent simplement faire glisser leur zip directement dans le navigateur et cela leur permettra de télécharger tous les fichiers qu'ils contiennent. Ils peuvent également créer de nouveaux fichiers Zip en faisant glisser des fichiers individuels dans.

Je sais que ce serait mieux de le faire côté serveur, mais ce projet est juste pour s'amuser.

Faire glisser des fichiers dans le navigateur devrait être assez facile si je profite des différentes méthodes disponibles. (style gmail)

Encodage/décodage devrait, espérons-le, bien se passer. J'ai vu des librairies as3 Zip, donc je suis sûr que ça devrait me convenir.

Mon problème est de télécharger les fichiers à la fin.

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....'

cela fonctionne très bien dans firefox mais pas dans le chrome. 

Je peux incorporer les fichiers sous forme d'images, il suffit de les trouver en chrome avec <img src="data:jpg/image;ba.." />, mais les fichiers ne seront pas nécessairement des images. Ils pourraient être n'importe quel format.

Quelqu'un peut-il penser à une autre solution ou à une sorte de solution de rechange?

javascriptdata-url
75
Mikee

Idées:

  • Essayez un <a href="data:...." target="_blank"> (non testé)

  • Utilisez downloadify à la place des URL de données (fonctionnerait également pour IE)

30
Pekka 웃

Si vous souhaitez également donner un nom suggéré au fichier (au lieu du "téléchargement" par défaut), vous pouvez utiliser les éléments suivants dans Chrome, Firefox et certaines versions IE:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

Et l'exemple suivant montre son utilisation:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
142
owencm

Voulez-vous partager mon expérience et aider quelqu'un coincé sur les téléchargements qui ne fonctionnent pas dans Firefox et dont la réponse a été mise à jour en 2014… ...

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);
23
Martino Dino

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  var b = document.createEvent("MouseEvents");
  b.initEvent("click", false, true);
  a.dispatchEvent(b);
  return false;
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

11
Zibri

Il existe plusieurs solutions mais elles dépendent de HTML5 et n'ont pas encore été implémentées complètement dans certains navigateurs. Les exemples ci-dessous ont été testés sous Chrome et Firefox (fonctionne en partie).

  1. Exemple de canevas with save to file support. Il suffit de définir votre document.location.href sur l'URI des données.
  2. Exemple de téléchargement d 'ancre . Il utilise <a href="your-data-uri" download="filename.txt"> pour spécifier le nom du fichier.
11
Viacheslav Dobromyslov

Voici une solution JavaScript pure que j'ai testée en travaillant dans Firefox et Chrome, mais pas dans Internet Explorer:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

Solutions multi-navigateurs trouvées jusqu'à présent:

downloadify -> Nécessite Flash

databounce -> Testé dans IE 10 et 11 et ne fonctionne pas pour moi. Nécessite une servlet et une personnalisation. (Détecte de manière incorrecte le navigateur. Je devais définir IE en mode de compatibilité pour tester, le jeu de caractères par défaut dans le servlet, l'objet d'options JavaScript avec le chemin d'accès correct pour les chemins absolus ...) Pour les navigateurs non IE, le fichier est ouvert la même fenêtre.

download.js -> http://danml.com/download.html Une autre bibliothèque similaire mais non testée. Il prétend être du pur JavaScript, ne nécessitant ni servlet ni Flash, mais ne fonctionne pas sur IE <= 9.

9
Jesus M C

Combinant les réponses de @owencm et de @ Chazt3n, cette fonction permettra le téléchargement de texte à partir d'IE11, de Firefox et de Chrome. (Désolé, je n'ai pas accès à Safari ou à Opera, mais veuillez ajouter un commentaire si vous essayez et ça marche.)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');
6
kevinarpe

On peut également lancer des téléchargements d'URL de données via JavaScript. Voir https://stackoverflow.com/a/13696029/271577 pour une telle solution (avec des exemples de lien de texte).

2
Brett Zamir

Citant ceci réponse:

Téléchargez le fichier, puis envoyez-le à l'utilisateur en tant que base64 (pour éviter les problèmes liés à CORS)

$.get(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

C'est IE 10+, Chrome 8+, FF 4+. Voir https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

Le fichier ne sera téléchargé que sur Chrome, Firefox et Opera. Cela utilise un attribut de téléchargement sur la balise d'ancrage pour forcer le navigateur à le télécharger.

0
danielmhanover

Votre problème se résume essentiellement à "tous les navigateurs ne le supporteront pas".

Vous pouvez essayer une solution de contournement et servir les fichiers décompressés à partir d'un objet Flash, mais vous perdrez alors la pureté uniquement JS (de toute façon, je ne suis pas sûr que vous puissiez actuellement "faire glisser des fichiers dans un navigateur" sans une solution de contournement Flash - est-ce une fonctionnalité HTML5 peut-être?)

0
Piskvor