Scarica il file dell’URL di dati

Sto giocando con l’idea di creare un’utilità zip / unzip basata su javascript che chiunque possa accedere da un browser. Possono semplicemente trascinare il loro 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 da server, ma questo progetto è solo per un po ‘di divertimento.

Trascinando i file nel browser dovrebbe essere abbastanza facile se approfitto dei vari metodi disponibili. (stile gmail)

La codifica / decodifica dovrebbe andare bene. Ho visto alcune librerie di zip as3 quindi sono sicuro che dovrei andare bene con quello.

Il mio problema è scaricare i file alla fine ..

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

    questo funziona bene in Firefox ma non in cromo.

    Posso incorporare i file come immagini appena trovate in chrome usando , ma i file non saranno necessariamente immagini. Potrebbero essere in qualsiasi formato.

    Qualcuno può pensare ad un’altra soluzione o qualche tipo di lavoro in giro?

    idee:

    • Prova un (non testato)

    • Usa downloadify invece di URL di dati (potrebbe funzionare anche per IE)

    Se vuoi anche dare un nome suggerito al file (invece del “download” predefinito) puoi utilizzare 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 che è il suo uso:

     downloadURI("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 qui sotto funzionerà sia in firefox che in chrome e accetterà un nome file:

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

    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 canvas con salvataggio su file. Basta impostare document.location.href sull’URI dei dati.
    2. Esempio di download di ancoraggio . Usa per specificare il nome del file.
     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"); 

    Ecco una soluzione JavaScript pura che ho provato 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; } 

    Soluzioni cross-browser trovate fino ad ora:

    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, charset predefinito in servlet, object 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. Dichiara di essere puro JavaScript, non richiede servlet né Flash, ma non funziona su IE <= 9.

    Combinando le risposte di @owencm e @ Chazt3n, questa funzione consentirà il download di testo da IE11, Firefox e Chrome. (Scusa, 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'); 

    Si può anche iniziare il download di URL di dati tramite JavaScript. Vedere https://stackoverflow.com/a/13696029/271577 per tale soluzione (insieme agli esempi di collegamento testuale).

    Il tuo problema in sostanza si riduce a “non tutti i browser supporteranno questo”.

    Puoi provare una soluzione alternativa e offrire i file decompressi da un object Flash, ma in questo caso si perderà la purezza di JS (in ogni caso, non sono sicuro che sia ansible “trascinare i file nel browser” senza una sorta di soluzione Flash. – forse una funzione HTML5?)

    Per chiunque abbia problemi con IE:

    Si prega di invertire la risposta qui da Yetti: salvare la canvas 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"); 

    Citando questa risposta:

    Scarica il file, quindi servilo all’utente come base64 (per evitare problemi 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(); }); 

    Questo è IE 10+, Chrome 8+, FF 4+. Vedi https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

    Scaricherà solo il file in Chrome, Firefox e Opera. Questo utilizza un attributo download sul tag anchor per forzare il browser a scaricarlo.