web-dev-qa-db-fra.com

Comment compresser des fichiers en utilisant JavaScript?

Existe-t-il un moyen de compresser des fichiers en utilisant JavaScript ?? Par exemple, comme dans Yahoo mail, lorsque vous avez choisi de télécharger toutes les pièces jointes d'un e-mail, il est compressé et téléchargé dans un seul fichier Zip. JavaScript est-il capable de faire cela? Si oui, veuillez fournir un exemple de codage.

J'ai trouvé cette bibliothèque appelée jszip pour faire la tâche mais elle a des problèmes connus et non résolus.

Comment puis-je résoudre le problème?

javascriptzipzipfile
21
Isuru

JSZip a été mis à jour au fil des ans. Maintenant, vous pouvez le trouver sur son dépôt GitHub

Il peut être utilisé avec FileSaver.js

Vous pouvez les installer en utilisant npm:

npm install jszip --save
npm install file-saver --save

Et puis importez-les et utilisez-les:

import JSZip from 'jszip';
import FileSaver from 'file-saver';

let Zip = new JSZip();
Zip.file("idlist.txt", `PMID:29651880\r\nPMID:29303721`);
Zip.generateAsync({type: "blob"}).then(function(content) {
  FileSaver.saveAs(content, "download.Zip");
});

Ensuite, vous téléchargerez un fichier Zip appelé download.Zip, une fois que vous l'avez extrait, et vous pouvez trouver à l'intérieur d'un fichier appelé idlist.txt, qui a deux lignes:

PMID:29651880
PMID:29303721

Et pour votre référence, j'ai testé avec les navigateurs suivants, et tous ont réussi:

  • Firefox 59.0.2 (Windows 10)
  • Chrome 65.0.3325.181 (Windows 10)
  • Microsoft Edge 41.16299.371.0 (Windows 10)
  • Internet Explorer 11.0.60 (Windows 10)
  • Opera 52 (Mac OSX 10.13)
  • Safari 11 (Mac OSX 10.13)
12
Yuci

Je recommanderais d'utiliser directement Node's bibliothèque intégrée Zlib pour cela, qui comprend des images; encoder en base 64 en utilisant des "tampons". Plutôt que d'utiliser npm packages. Les raisons étant:

  • Zlib est une bibliothèque Node native - a été mise à jour depuis près de 10 ans maintenant - donc les preuves là-bas pour les supports à long terme
  • Le nœud vous permet de travailler avec des tampons - c'est-à-dire que vous pouvez convertir votre chaîne de texte/images en données binaires brutes et les compresser de cette façon avec Zlib
  • compresser et décompresser facilement des fichiers volumineux - tirer parti des flux de nœuds pour compresser des fichiers en Mo ou en Go

Le fait que vous utilisiez jszip me permettrait de deviner que vous utilisez aussi bien npm que node; suppose que vous avez correctement configuré votre environnement, c'est-à-dire que le nœud est installé à l'échelle mondiale.

Exemple: input.txt compressé pour devenir input.txt.gz

const zlib = require('zlib');
const fs = require('fs');
const gzip = zlib.createGzip();
const input = fs.createReadStream('input.txt');
const output = fs.createWriteStream('input.txt.gz');

input.pipe(gzip).pipe(output);

Étape 1: Donc, vous require chacun des modules natifs du nœud - vous avez besoin fait partie d'ES5. Zlib comme mentionné précédemment, et le module fs, le module File System.

const zlib = require('zlib');
const fs = require('fs');

Étape 2: Le module fs, qui vous permet de créer un readstream, est spécifiquement appelé pour lire des blocs de données. Cela renverra un objet readstream; flux lisible

const input = fs.createReadStream(FILE PATH HERE);

__Note: Cet objet de flux de lecture est ensuite redirigé; ce chaînage de tuyaux sur des objets lisibles peut se produire à l'infini, ce qui rend les tuyaux très flexibles.

ReadStream.pipe(DoesSomething).pipe(SomethingElse).pipe(ConvertToWriteStream)

Étape 3: L'objet du flux de lecture, qui a été canalisé et compressé, est ensuite converti en objet writestream.

const output = fs.createWriteStream('input.txt.gz');

input.pipe(gzip).pipe(output); // returned filename input.txt.gz, within local directory

Cette bibliothèque vous permet donc de saisir facilement un chemin de fichier et de décider où vous voulez que votre fichier compressé soit. Vous pouvez également choisir de faire l'inverse, si besoin est.

2
A. Tran

Avec les nouvelles API de fichiers HTML5 et les tableaux typés, vous pouvez à peu près faire tout ce que vous voulez en JavaScript. Cependant, le support du navigateur ne sera pas génial. Je suppose que c'est ce que vous vouliez dire par "problèmes non résolus". Je recommanderais, pour le moment, de le faire sur le serveur. Par exemple, en PHP, vous pouvez utiliser cette extension.

1
Alex Turpin

En utilisant JSZIP, nous pouvons générer et télécharger un fichier Zip en JavaScript. Pour cela, vous devez suivre les étapes ci-dessous

  1. Téléchargez le fichier Zip jszip depuis http://github.com/Stuk/jszip/zipball/master
  2. Extraire le Zip et trouver le fichier jszip.js dans le dossier dist

  3. Importez le fichier jszip.js dans votre fichier html comme ci-dessous

    <script type="text/javascript" src="jszip.js"></script>

  4. Ajoutez la fonction ci-dessous dans votre code et appelez-la

    onClickDownload: function () {
    var Zip = new JSZip();
    for (var i = 0; i < 5; i++) {
        var txt = 'hello';
        Zip.file("file" + i + ".txt", txt);
    }
    Zip.generateAsync({
        type: "base64"
    }).then(function(content) {
        window.location.href = "data:application/Zip;base64," + content;
    });       
}

  5. Vous pouvez télécharger un exemple de code depuis mon référentiel git ici ( lien GIT )

0
Sangeetharaj

JavaScript est capable de le faire, mais pas d'une manière multi-navigateur sur laquelle vous pouvez compter.

Cela peut cependant être fait facilement avec un langage côté serveur. Si vous avez l'habitude de PHP voici la documentation des fonctions Zip de PHP: http://php.net/manual/en/book.Zip.php

0
Jasper