w3schools img attribute javascript zip unzip

javascript - img - Descomprimir archivos



title html css (6)

Quiero mostrar los archivos de OpenOffice , .odt y .odp en el lado del cliente usando un navegador web.

Estos archivos son archivos comprimidos. Usando Ajax, puedo obtener estos archivos del servidor, pero estos son archivos comprimidos. Tengo que descomprimirlos usando JavaScript , he intentado usar inflate.js, http://www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt , pero sin éxito.

¿Cómo puedo hacer esto?

El ejemplo del código se da en el sitio del autor . Puede usar babelfish para traducir los textos (del japonés al inglés).

Por lo que entiendo japonés, este código de inflado zip está destinado a decodificar datos ZIP (secuencias) no archivo ZIP.

Encontré jszip bastante útil. Hasta ahora he usado solo para leer, pero también tienen capacidades de creación / edición.

En cuanto al código, se ve algo como esto

var new_zip = new JSZip(); new_zip.load(file); new_zip.files["doc.xml"].asText() // this give you the text in the file

Una cosa que noté es que parece que el archivo tiene que estar en formato de flujo binario (léase utilizando .readAsArrayBuffer de FileReader (), de lo contrario, recibía errores que decían que podría tener un archivo zip corrupto

Escribí un descompresor en Javascript. Funciona.

Se basa en el lector de archivos binarios de Andy GP Na y algunos RFC1951 inflan la lógica de notmasteryet . Agregué la clase ZipFile.

ejemplo de trabajo:
http://cheeso.members.winisp.net/Unzip-Example.htm (vínculo inactivo)

La fuente:
http://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip (enlace muerto)

NB : los enlaces están muertos; Pronto encontraré un nuevo anfitrión.

Se incluye en la fuente una página de demostración de ZipFile.htm y 3 scripts distintos, uno para la clase de archivo zip, uno para la clase de inflado y uno para una clase de lector de archivos binarios. La demostración también depende de jQuery y jQuery UI. Si acaba de descargar el archivo js-zip.zip, toda la fuente necesaria está allí.

Así es como se ve el código de la aplicación en Javascript:

// In my demo, this gets attached to a click event. // it instantiates a ZipFile, and provides a callback that is // invoked when the zip is read. This can take a few seconds on a // large zip file, so it''s asynchronous. var readFile = function(){ $("#status").html("<br/>"); var url= $("#urlToLoad").val(); var doneReading = function(zip){ extractEntries(zip); }; var zipFile = new ZipFile(url, doneReading); }; // this function extracts the entries from an instantiated zip function extractEntries(zip){ $(''#report'').accordion(''destroy''); // clear $("#report").html(''''); var extractCb = function(id) { // this callback is invoked with the entry name, and entry text // in my demo, the text is just injected into an accordion panel. return (function(entryName, entryText){ var content = entryText.replace(new RegExp( "//n", "g" ), "<br/>"); $("#"+id).html(content); $("#status").append("extract cb, entry(" + entryName + ") id(" + id + ")<br/>"); $(''#report'').accordion(''destroy''); $(''#report'').accordion({collapsible:true, active:false}); }); } // for each entry in the zip, extract it. for (var i=0; i<zip.entries.length; i++) { var entry = zip.entries[i]; var entryInfo = "<h4><a>" + entry.name + "</a></h4>/n<div>"; // contrive an id for the entry, make it unique var randomId = "id-"+ Math.floor((Math.random() * 1000000000)); entryInfo += "<span class=''inputDiv''><h4>Content:</h4><span id=''" + randomId + "''></span></span></div>/n"; // insert the info for one entry as the last child within the report div $("#report").append(entryInfo); // extract asynchronously entry.extract(extractCb(randomId)); } }

La demostración funciona en un par de pasos: readFile fn se activa con un clic y crea un objeto ZipFile, que lee el archivo zip. Hay una devolución de llamada asincrónica para cuando finalice la lectura (generalmente ocurre en menos de un segundo para las cremalleras de tamaño razonable): en esta demostración, la devolución de llamada se lleva a cabo en la variable local doneReading, que simplemente llama a extractEntries , que simplemente descomprime todo el contenido del proporcionado archivo zip. En una aplicación real, probablemente elegiría algunas de las entradas para extraer (permitir que el usuario seleccione, o elegir una o más entradas mediante programación, etc.).

El extractEntries fn itera sobre todas las entradas, y llama a extract() en cada una, pasando una devolución de llamada. La descompresión de una entrada lleva tiempo, tal vez 1 o más para cada entrada en el archivo zip, lo que significa que la asincronía es apropiada. La devolución de llamada de extracto simplemente agrega el contenido extraído a un acordeón de jQuery en la página. Si el contenido es binario, se formatea como tal (no se muestra).

Funciona, pero creo que la utilidad es algo limitada.

Por un lado: es muy lento. Toma ~ 4 segundos para descomprimir el archivo AppNote.txt de 140k de PKWare. La misma descompresión se puede hacer en menos de .5s en un programa .NET. EDITAR : Javascript ZipFile descomprime considerablemente más rápido que esto ahora, en IE9 y en Chrome. Todavía es más lento que un programa compilado, pero es bastante rápido para el uso normal del navegador.

Por otro: no hace streaming. Básicamente, sorbe todo el contenido del archivo zip en la memoria. En un entorno de programación "real", puede leer solo los metadatos de un archivo comprimido (digamos, 64 bytes por entrada) y luego leer y descomprimir los demás datos como desee. No hay forma de hacer IO así en javascript, hasta donde yo sé, por lo tanto, la única opción es leer todo el archivo comprimido en la memoria y hacer acceso aleatorio en él. Esto significa que colocará demandas irrazonables en la memoria del sistema para archivos zip grandes. No es tanto un problema para un archivo zip más pequeño.

Además: no maneja el archivo zip de "caso general" - hay muchas opciones de código postal que no me molesté en implementar en el descompactador - como cifrado ZIP, cifrado WinZip, zip64, nombres de archivo codificados UTF-8, y así en. ( EDITAR - ahora maneja nombres de archivos codificados con UTF-8). La clase ZipFile maneja lo básico, sin embargo. Algunas de estas cosas no serían difíciles de implementar. Tengo una clase de encriptación AES en Javascript; que podría integrarse para admitir el cifrado. Respaldar Zip64 probablemente sería inútil para la mayoría de los usuarios de Javascript, ya que está diseñado para admitir archivos zip de> 4 gb, no es necesario extraerlos en un navegador.

Tampoco probé el caso para descomprimir el contenido binario. En este momento, descomprime el texto. Si tiene un archivo binario comprimido, tendrá que editar la clase ZipFile para manejarlo correctamente. No descubrí cómo hacerlo limpiamente. Hace archivos binarios ahora, también.

EDITAR - Actualicé la biblioteca y demo de descompresión de JS. Ahora hace archivos binarios, además de texto. Lo he hecho más flexible y más general: ahora puede especificar la codificación que usará cuando lea archivos de texto. Además, la demostración se amplió: muestra la descompresión de un archivo XLSX en el navegador, entre otras cosas.

Entonces, aunque creo que es de utilidad e interés limitados, funciona. Supongo que funcionaría en Node.js.