Avant l’apparition des nouvelles fonctionnalités offertes par le HTML5, il n’était pas possible de traiter les formats de fichiers comme le ZIP en web. Avec la mise à disposition d’objets JavaScripts nouvelle génération, nos navigateurs préférés sont maintenant capable de traiter des formats de fichiers hétérogènes, n’ayant de limite que les ressources du poste client.
zip. js
Cette bibliothèque, apparue sur GitHub le 15 Août 2011, permet la gestion du format ZIP en JavaScript. Elle se veut pleinement compatible avec les dernières version des navigateurs web Chrome, Firefox, Safari 6, Internet Explorer 10, et dégradée pour les versions 5 de Safari et 9 d’Internet Explorer.
Cette bibliothèque repose sur les tableaux typés ainsi que sur les API JavaScript suivantes :
- Web workers
- File
- File writer
- File directories and system
Pour l’utiliser vous devez référencer le script “zip. js” et définir le répertoire où se trouve les autres scripts dont il dépend (deflate. js, inflate. js, z-worker. js).
<!DOCTYPE html>
<html>
<head>
<title>zip.js Demo</title>
<script type="text/javascript" src="zip/zip.js"></script>
<script type="text/javascript">
zip.workerScriptsPath = "/zip/";
</script>
</head>
<body>
...
</body>
</html>Gestion d’une archive
Si vous devez afficher le contenu d’un fichier ZIP récupéré via HTTP, il vous suffit de réaliser une XMLHttpRequest de type “blob” et de traiter la réponse grâce à zip. js.
renderZIPPage('/render.zip');
function renderZIPPage(url) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log(this);
if (this.readyState == 4 && this.status == 200) {
console.log('pop');
var blob = new Blob([this.response], { type: "application/zip" });
// use a BlobReader to read the zip from a Blob object
zip.createReader(new zip.BlobReader(blob), function (reader) {
// get all entries from the zip
reader.getEntries(function (entries) {
var content = '';
for (var i = 0; i < entries.length; i++) {
content += entries[i].filename + '<br/>';
}
document.getElementById('zip-content').innerHTML = content;
});
}, function (error) {
// onerror callback
console.log(error);
});
}
}
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}Enfin, ajoutez un nouvel élément div à votre code html :
<div id="zip-content"></div>Vous devriez voir à l’écran la liste des fichiers contenus dans votre archive.
Conclusion
Comme vous pouvez le voir, la manipulation du format ZIP par les technologies propres au web est devenue beaucoup plus accessible. Pour créer un fichier ZIP et y placer du contenu, vous pouvez observer cette démonstration. Pour afficher le contenu d’un fichier ZIP local, il suffit d’analyser cette autre démonstration sur le site officiel.
Sources :
