Descargar el archivo url de datos

Question

Juego con la idea de crear una utilidad zip/unzip completamente javascript a la que cualquiera pueda acceder desde un navegador. Simplemente pueden arrastrar su zip directamente al navegador y les permitirá descargar todos los archivos. También pueden crear nuevos archivos zip arrastrando los archivos individuales en.

Sé que sería mejor hacerlo serverside, pero este proyecto es sólo para un poco de diversión.

arrastrar archivos en el navegador debería ser bastante fácil si tomo ventaja de los diversos métodos disponibles. (Estilo Gmail)

de codificación/decodificación de esperar que debe estar bien. He visto algunas bibliotecas zip AS3, así que estoy seguro de que estaré bien con eso.

Mi problema es la descarga de los archivos al final ..

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

esto funciona bien en Firefox pero no en cromo.

que puede incrustar los archivos como imágenes acaba de encontrar en cromo utilizando <img src="data:jpg/image;ba.." />, pero los archivos solía ser necesariamente imágenes. Podrían ser cualquier formato.

¿Alguien puede pensar en otra solución o algún tipo de trabajo?

Answer 1

Ideas:

• probar un <a href="data:...." target="_blank"> (no probado)

• Uso downloadify en lugar de direcciones URL de datos (trabajaría para IE así)

Answer 2

Su problema esencial radica a "no todos los navegadores apoyarán esto".

Podría intentar una solución alternativa y servir los archivos descomprimidos de un objeto Flash, pero luego perdería la pureza solo de JS (de todos modos, no estoy seguro si actualmente puede "arrastrar archivos al navegador" sin especie de flash solución - es que una característica de HTML5 tal vez)

Answer 3

Hay varias soluciones pero dependen de HTML5 y no se han aplicado por completo en algunos navegadores todavía?. Los siguientes ejemplos fueron probados en Chrome y Firefox (parcialmente funciona).

1. Canvas example con compatibilidad para guardar archivos. Simplemente configure su document.location.href en el URI de datos.
2. Anchor download example. Utiliza <a href="your-data-uri" download="filename.txt"> para especificar el nombre del archivo.

Answer 4

También se puede iniciar descargas de URL datos a través de JavaScript. Ver https://stackoverflow.com/a/13696029/271577 para tal solución (junto con ejemplos de enlace de texto).

Answer 5

Si también quiere dar un nombre sugerido para el archivo (en lugar de la 'descarga' por defecto) se puede utilizar el siguiente en Chrome, Firefox y algunas versiones de 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; 
} 

Y el siguiente ejemplo muestra su uso:

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

Answer 6

quiero compartir mi experiencia y ayudar a alguien atrapado en las descargas no funciona en Firefox y respuesta actualizada a 2014. El siguiente fragmento de código trabajará tanto en Firefox y Chrome y que aceptará un nombre de archivo :

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

Answer 7

Aquí es una solución pura Javascript Probé trabajando en Firefox y Chrome, pero no en IExplorer:

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; 
} 

soluciones navegadores encontrado hasta ahora:

downloadify -> requiere Flash

databounce -> probado en iexplorer 10 y 11 no funciona para mí, requiere un servlet y algo de personalización (detectar incorrectamente el navegador que tuve que configurar iexplorer en compatibil modo de prueba, juego de caracteres predeterminado en servlet, objeto de opciones de JavaScript con ruta de servlet correcta para rutas absolutas ...) para no iexplorer abre el archivo en la misma ventana.

download.js http://danml.com/download.html otra biblioteca similar, pero no probado, afirma ser el javascript puro, servlet que no requiere ni flash, pero sólo funciona en IExplorer 10 y 11

Answer 8

Para cualquiera que tenga problemas en el IE:

favor upvote la respuesta aquí por Yetti: saving canvas locally 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"); 

Answer 9

combinación de respuestas y @owencm @ Chazt3n, esta función permitirá la descarga de texto de IE11, Firefo x y Chrome (Lo siento, no tengo acceso a Safari u Opera, pero por favor añadir un comentario si se intenta y funciona.)

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

Answer 10

// ======================================== 
 
// ==   Download dataURL   == 
 
// = Downloads a dataURL in a local file == 
 
// = Include this header if you use it! == 
 
// =    Namaste!    == 
 
// ==  By zibri@zibri.org   == 
 
// ======================================== 
 

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