Как архивировать файлы с помощью JavaScript

Question

Есть ли способ архивировать файлы с помощью JavaScript ??Например, как в почте Yahoo, когда вы решили загрузить все вложения из электронного письма, оно архивируется и загружается в один zip-файл.Может ли JavaScript это сделать?Если да, предоставьте пример кода.

Я нашел эту библиотеку с именем jszip , чтобы выполнить задачу, но у нее есть известные и нерешенные проблемы.

Спасибо.

Answer 1

JSZip обновлялся годами.Теперь вы можете найти его на его репозитории GitHub

. Может использоваться вместе с FileSaver.js

. Вы можете установить их, используя npm:

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

А затем импортируйте и используйте их:

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");
});

Затем вы скачаете ZIP-файл с именем download.zip, как только вы его распакуете, и сможете найти его внутри файла.называется idlist.txt, который имеет две строки:

PMID:29651880
PMID:29303721

И для вашей справки я протестировал следующие браузеры, и все прошло:

• 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)

Answer 2

Используя JSZIP, мы можем генерировать и загружать zip-файлы на JavaScript.Для этого вам необходимо выполнить следующие шаги:

1. Загрузите jszip-файл zip из http://github.com/Stuk/jszip/zipball/master
2. Извлеките zip и найдите файл jszip.js в папке dist

3. Импорт файла jszip.js в html-файл, как показано ниже:

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

4. Добавьте нижеприведенную функцию в свой код и вызовите ее

   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. Вы можете скачать пример кода из моего репозитория git здесь ( ссылка GIT )

Answer 3

Я бы рекомендовал сразу перейти к использованию Node's встроенной библиотеки Zlib для этого, которая включает в себя изображения;кодировать в базе 64, используя «буферы».Вместо использования пакетов npm .Причины:

• Zlib является нативной библиотекой Node - обновляется уже почти 10 лет - так что есть доказательства долгосрочной поддержки
• Узел позволяет вам работать с буферами - то есть вы можете конвертировать ваши текстовые строки / изображения в необработанные двоичные данные и сжимать их таким образом с помощью Zlib
• Легко сжимать ираспаковывать большие файлы - использовать потоки узлов для сжатия файлов в МБ или ГБ

Тот факт, что вы используете jszip, позволил бы мне догадаться, что вы используете npm, а также узел;Предполагается, что вы правильно настроили свою среду, то есть узел установлен глобально.

Пример: input.txt сжат, чтобы стать 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);

Шаг 1: Таким образом, вы require каждого из собственных модулей из узла - require является частью ES5.Zlib, как упоминалось ранее, и модуль fs, модуль Файловая система .

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

Шаг 2: Модуль fs ,это позволяет создавать readstream , специально предназначенный для чтения фрагментов данных.Это вернет объект readstream ;читаемый поток

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

__ Примечание. Этот объект чтения затем снова отправляется по конвейеру;эта цепочка каналов на объектах readsteam может происходить бесконечно, что делает каналы очень гибкими.

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

Шаг 3: Объект readstream, который был передан по конвейеру и сжат, затем преобразуетсяto writeestream object.

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

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

Таким образом, эта библиотека позволяет вам легко ввести путь к файлу и решить, где вы хотите, чтобы ваш сжатый файл был.Вы также можете сделать обратное, если это необходимо.

Answer 4

С новыми файловыми API-интерфейсами HTML5 и типизированными массивами вы можете делать практически все, что захотите, в JavaScript. Тем не менее, поддержка браузера не будет отличной. Я думаю, это то, что вы имели в виду под «нерешенными проблемами». Я бы порекомендовал пока сделать это на сервере. Например, в PHP вы можете использовать это расширение.

Answer 5

JavaScript способен делать это, но не в кросс-браузерной манере, на которую вы можете рассчитывать.

Однако это можно легко сделать с помощью языка на стороне сервера.Если вы привыкли к PHP, вот документация по PHP-функциям ZIP: http://php.net/manual/en/book.zip.php