Scarica il file url dei dati

Sto giocando con l'idea di creare un'utilità zip / unzip completamente basata su JavaScript a cui chiunque possa accedere da un browser. Possono semplicemente trascinare la zip direttamente nel browser e gli permetterà di scaricare tutti i file all'interno. Possono anche creare nuovi file zip trascinando i singoli file in.

So che sarebbe meglio farlo sul lato server, ma questo progetto è solo per un po 'di divertimento.

Trascinare i file nel browser dovrebbe essere abbastanza semplice se traggo vantaggio dai vari metodi disponibili. (Stile Gmail)

Si spera che la codifica / decodifica vada bene. Ho visto alcune librerie zip as3 quindi sono sicuro che dovrei andare bene con quello.

Il mio problema è il download dei file alla fine.

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

funziona bene con Firefox ma non con Chrome.

Posso incorporare i file come immagini bene in Chrome usando <img src="data:jpg/image;ba.." />, ma i file non saranno necessariamente immagini. Potrebbero essere di qualsiasi formato.

Qualcuno può pensare a un'altra soluzione o una sorta di soluzione alternativa?

idee:

• Prova un <a href="data:...." target="_blank">(Non testato)

• Usa downloadify invece degli URL dei dati (funzionerebbe anche per IE)

Se vuoi anche dare un nome suggerito al file (invece del "download" predefinito) puoi usare quanto segue in Chrome, Firefox e alcune versioni di 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;
}

E il seguente esempio mostra il suo utilizzo:

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

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

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

o:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Vuoi condividere la mia esperienza e aiutare qualcuno bloccato sui download che non funzionano in Firefox e la risposta aggiornata al 2014. Lo snippet di seguito funzionerà sia in Firefox che in Chrome e accetterà un nome file:

  // 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);

Ecco una soluzione JavaScript pura che ho testato lavorando in Firefox e Chrome ma non in 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;
}

Le soluzioni cross-browser finora trovate:

downloadify -> Richiede Flash

databounce -> Testato in IE 10 e 11 e non funziona per me. Richiede un servlet e alcune personalizzazioni. (Rileva erroneamente il navigatore. Ho dovuto impostare IE in modalità compatibilità per testare, set di caratteri predefinito nel servlet, oggetto opzioni JavaScript con percorso servlet corretto per percorsi assoluti ...) Per i browser non IE, apre il file nella stessa finestra.

download.js -> http://danml.com/download.html Un'altra libreria simile ma non testata. Afferma di essere puro JavaScript, non richiede servlet né Flash, ma non funziona su IE <= 9.

Esistono diverse soluzioni, ma dipendono da HTML5 e non sono ancora state implementate completamente in alcuni browser. Gli esempi seguenti sono stati testati in Chrome e Firefox (in parte funziona).

1. Esempio di tela con supporto per salvataggio su file. Basta impostare document.location.hrefl'URI dei dati.
2. Esempio di download dell'ancora . Usa <a href="your-data-uri" download="filename.txt">per specificare il nome del file.

Combinando le risposte di @owencm e @ Chazt3n, questa funzione consentirà il download di testo da IE11, Firefox e Chrome. (Mi dispiace, non ho accesso a Safari o Opera, ma per favore aggiungi un commento se provi e funziona.)

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');

Per chiunque abbia problemi con IE:

Per favore, vota la risposta qui di Yetti: salvare la tela localmente in IE

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

Il problema si riduce essenzialmente a "non tutti i browser lo supporteranno".

Potresti provare una soluzione alternativa e servire i file decompressi da un oggetto Flash, ma poi perdi la purezza solo JS (comunque, non sono sicuro se al momento puoi "trascinare i file nel browser" senza una sorta di soluzione Flash - è forse una funzionalità HTML5?)