Een gezipt bestand lezen vanuit een webpagina

Voor het werken met bestanden op de cliënt- computer kan binnen JavaScript de File API worden gebruikt. Deze API is beschikbaar in alle grote browsers en heeft diverse mogelijkheden voor het lezen en schrijven van bestanden en bestandseigenschappen.

Bestanden lezen gaat met het object FileReader(). Een beschrijving is te vinden in het item Een tekstfile lezen met JavaScript.

Elders op deze site staan items over het lezen van tekstfiles en (semi-)binaire files. Een voorbeeld van de laatste soort is het formaat van dBaseIII+. Dat is betrekkelijk eenvoudig: een header-sectie met gegevens over de inhoud en een data-sectie met de opeenvolgende records met gegevens. Een tweede voorbeeld van een semi-binair bestandsformaat is het zip-formaat, dat gebruikt wordt voor het comprimeren van bestanden. Het gaat hier in het bijzonder om het oorspronkelijke formaat van PKZIP. Varianten, zoals 7-zip, gebruiken een ander, efficiënter compressie-algoritme. De manier van data-opslag bij het origineel en de varianten verschilt niet wezenlijk.

Een zip-file (archief) bestaat uit een root header en een data-sectie.
De root header bevat een lijst met records met daarin een filenaam, een verwijzingen naar het begin van die file in het archief en de lengte van de gecomprimeerde file. Een file kan ook een directory-record zijn, wat ook weer een header is, met informatie over bestanden en directories. Feitelijk is het een boomstructuur zoals die in elke computer voorkomt.
Een beknopte beschrijving over het zippen van een bestand vind je HIER.

Om te laten zien hoe zoiets werkt in de praktijk wordt hier een bewerking gepresenteerd van een applicatie die is gemaakt door Gildas Lormeau, die zijn werk beschikbaar stelt op GitHub. Het is nl. lastig om dit zelf te programmeren. Het is ook niet nodig, want er is wat goeds (gratis!) beschikbaar.
De applicatie opent een zip-file en toont de lijst met bestanden en mappen in het archief. Als er op een bestand wordt geklikt wordt dat uitgepakt en gedownload naar de standaard downloadmap. De codepage kan op CP437 blijven staan. Dat volstaat voor de meeste bestandsnamen in West Europa. Als er onleesbare karakters in de filenamen voorkomen moet je utf-8 kiezen.

Toon de applicatie.

De aanpassingen aan de applicatie zijn beperkt tot kleine aanpassingen aan de opmaak, het verwijderen van niet-werkende items uit de listbox met codepages en het vertalen van de Engelse teksten in het Nederlands. De foutmeldingen die uit zip.js komen (in het Engels) zijn niet vertaald.

De code van het voorbeeld kun je downloaden om zelf te gebruiken en/of om zelf aan door te ontwikkelen.

De code van de applicatie bestaat uit één HTML-bestand en twee JavaScript-bestanden. De HTML is nodig om de applicatie te laten werken in een browser. Het eerste JavaScript-bestand (script.js) bestuurt het openen van een .zip-file en het zichtbaar maken van de inhoud op het scherm. Het daadwerkelijke uitpakken gebeurt door de functions in het tweede .zip-bestand (zip-full.min.js). Deze file is de geminificeerde versie van zip-full.js.
De downloadfile bevat alleen de geminificeerde versie. De 'gewone' versie vind je op GitHub.

Je kunt zip.js niet gebruiken vanaf een CDN, want het is daar niet beschikbaar. Dat wil zeggen: Ik heb het niet kunnen vinden. Kijk dus regelmatig even op GitHub om te kijken of je de laatste versie hebt. zip.js wordt actief onderhouden.

Als je op internet (lees: GitHub) zoekt naar zip.js, kun je ook jszip.js tegenkomen. Die heeft dezelfde functionaliteit, maar is lastiger in het gebruik. Voorts leunt jszip.js op jquery, waar zip.js is gemaakt in "plat" JavaScript.

zip.js is geschikt voor gebruik in een website en met node.js. Intern gebruikt het modules. Er zijn in JavaScript verschillen tussen de ECMA-262 standaard (in websites) en de CommonJS-specificatie (in node.js). zip.js lost dat zelf op.

Zelf gebruiken of inbouwen in je eigen site

• Download de zip-file en pak hem uit. Je hebt meteen een werkende applicatie. Hernoem eventueel de file html803a.htm naar index.html of iets dergelijks.
• Verander kleuren, lettertype, enz. naar je eigen smaak.
• De downloadfile bevat alleen een geminificeerde versie (zip-full.min.js). De 'gewone' versie vind je op GitHub.

Downloaden:
 
Druk op de knop:  File: voorb803.zip, 52 938 bytes.