javascript - manejo - Descargar el archivo url de datos

leer el contenido de un archivo en javascript

Question

Estoy jugando 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 archivos individuales en.

Sé que sería mejor hacerlo en el servidor, pero este proyecto es solo un poco divertido.

Arrastrar archivos al navegador debería ser lo suficientemente fácil si aprovecho los diversos métodos disponibles. (estilo de gmail)

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

Mi problema es descargar los archivos al final ..

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

esto funciona bien en Firefox pero no en Chrome.

Puedo incrustar los archivos como imágenes que acabo de encontrar en Chrome utilizando <img src="data:jpg/image;ba.." /> , pero los archivos no necesariamente serán imágenes. Podrían ser cualquier formato.

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

Answer 1

Aquí hay una solución de JavaScript pura que probé trabajando en Firefox y Chrome, pero no en 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;
}

Soluciones de navegador cruzado encontradas hasta ahora:

descargarify -> Requiere Flash

databounce -> Probado en IE 10 y 11, y no funciona para mí. Requiere un servlet y algo de personalización. (Detecta el navegador incorrectamente. Tuve que configurar IE en modo de compatibilidad para probar, juego de caracteres predeterminado en servlet, objeto de opciones de JavaScript con ruta de servlet correcta para rutas absolutas ...) Para los navegadores que no sean IE, abre el archivo en la misma ventana.

download.js -> download.js Otra biblioteca similar pero no probada. Se dice que es JavaScript puro, que no requiere servlet ni Flash, pero que no funciona en IE <= 9.

Answer 2

Combinando respuestas de @owencm y @ Chazt3n, esta función permitirá descargar texto de IE11, Firefox y Chrome. (Lo siento, no tengo acceso a Safari u Opera, pero agrega un comentario si lo intentas 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 3

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

1. Ejemplo de lienzo con soporte para guardar archivos. Simplemente configure su document.location.href en el URI de datos.
2. Ejemplo de descarga de anclaje Utiliza <a href="your-data-uri" download="filename.txt"> para especificar el nombre del archivo.

Answer 4

Ideas:

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

• Utilice downloadify lugar de URL de datos (también funcionaría para IE)

Answer 5

Para cualquier persona que tenga problemas en IE:

Por favor, vota la respuesta aquí por Yetti: salvando lienzo localmente en 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 6

Quiero compartir mi experiencia y ayudar a alguien atascado en las descargas que no funcionan en Firefox y la respuesta actualizada a 2014. El siguiente fragmento funcionará tanto en Firefox como en Chrome y 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

Si también desea dar un nombre sugerido al archivo (en lugar de la ''descarga'' predeterminada), puede usar lo 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 8

Su problema esencialmente se reduce a "no todos los navegadores soportarán esto".

Podría intentar una solución y servir los archivos descomprimidos de un objeto Flash, pero luego perdería la pureza solo de JS (de todos modos, no estoy seguro de si actualmente puede "arrastrar archivos al navegador" sin algún tipo de solución Flash). - ¿Es una característica HTML5 tal vez?)

Answer 9

También se pueden iniciar descargas de URL de datos a través de JavaScript. Consulte https://.com/a/13696029/271577 para obtener una solución de este tipo (junto con ejemplos de enlaces de texto).

Answer 10

// ========================================
// == Download dataURL ==
// = Downloads a dataURL in a local file ==
// = Include this header if you use it! ==
// = Namaste! ==
// == By [email protected] ==
// ========================================
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");