如何使用JavaScript压缩文件

Is there a way to zip files using JavaScript?? For an example, like in Yahoo mail, when you chose to download all the attachments from an email, it gets zipped and downloaded in a single zip file. Is JavaScript capable of doing that? If so, please provide a coding example.

有没有使用JavaScript的压缩文件的方法?例如，在Yahoo mail中，当您选择从电子邮件中下载所有附件时，它会被压缩并下载到一个zip文件中。JavaScript能够做到这一点吗?如果有，请提供一个编码示例。

I found this library called jszip to do the task but it has known and unresolved issues.

我找到了这个名为jszip的库来执行这个任务，但它已经知道了一些未解决的问题。

Thank you.

谢谢你！

4 个解决方案

#1

With the new HTML5 file APIs and the typed arrays, you can pretty much do anything you want in JavaScript. However, the browser support isn't going to be great. I'm guessing that's what you meant by "unresolved issues". I would recommend, for the time being, to do it on the server. For example, in PHP, you could use this extension.

使用新的HTML5文件api和类型化数组，您可以在JavaScript中做任何您想做的事情。然而，浏览器的支持并不是很好。我猜这就是你所说的“未解决的问题”。目前，我建议在服务器上执行。例如，在PHP中，可以使用此扩展。

#2

JavaScript is capable of doing this but not in a cross-browser fashion that you can count on.

JavaScript能够做到这一点，但不能以跨浏览器的方式进行计算。

This can however be done easily with a server-side language. If you are used to PHP here is the documentation for PHP's ZIP functions: http://php.net/manual/en/book.zip.php

但是，这可以通过服务器端语言轻松实现。如果您习惯使用PHP，这里有PHP ZIP函数的文档:http://php.net/manual/en/book.zip.php

#3

I'd recommend going straight to using Node's built-in library Zlib for this, which includes images; encode in base 64 using "buffers". Rather than using npm packages. Reasons being:

我建议直接使用Node的内置库Zlib，其中包括图像;使用“缓冲区”以64为基数进行编码。而不是使用npm包。原因是:

Zlib is a Node native library - has been kept up-to-date for nearly 10 years now - so the proofs there for long-term supports
Zlib是一个节点本地库——已经更新了近10年——因此这里的证据可以长期支持
Node allows you work with Buffers - i.e. you can convert your text string/images to the raw binary data and compress it that way with Zlib
Node允许您使用缓冲区—例如，您可以将文本字符串/图像转换为原始的二进制数据，并使用Zlib以这种方式压缩它
Easily compress and decompress large files - leverage node streams to compress files in MBs or GBs
轻松压缩和解压大型文件——利用节点流压缩MBs或GBs中的文件

The fact you are using jszip, would allow me to guess that you are using npm as well as node; assumes you have set up your environment correctly, i.e. node installed globally.

您使用的是jszip，这可以让我猜测您使用的是npm和node;假设您已经正确地设置了您的环境，即全局安装的节点。

Example: input.txt compressed to become input.txt.gz

例如:输入。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);

Step 1: So you require each of the native modules from node - require is part of ES5. Zlib as previously mentioned, and fs module, the File System module.

步骤1:因此您需要每个来自node的本地模块—require都是ES5的一部分。像前面提到的Zlib和fs模块，文件系统模块。

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

Step 2: The fs module, this allows you to create a readstream, are specifically called to read chunks of data. This will return a readstream object; readable stream

步骤2:fs模块，它允许您创建一个readstream，专门用于读取数据块。这将返回一个readstream对象;可读的流

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

__Note: This readstream object then gets piped again; this chaining of pipes on readsteam objects can occur endlessly, making pipes very flexible.

__Note:这个readstream对象然后再次被管道输送;在重新使用蒸汽的物体上，这种管道链接可能会不断发生，使管道非常灵活。

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

Step 3: The readstream object, that has been piped and compressed is then converted to writestream object.

步骤3:已经通过管道和压缩的readstream对象然后被转换为writestream对象。

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

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

So this library allows you easily enter a file path and decide where you want your compressed file to be. You can also choose to do the reverse, if need be.

因此，这个库允许您轻松地输入文件路径并决定要将压缩文件放在何处。如果需要，您也可以选择做反向操作。

#4

JSZip has been updated over the years. Now you can find it on its GitHub repo

JSZip多年来一直在更新。现在你可以在它的GitHub repo上找到它。

It can be used together with FileSaver.js

它可以与FileSaver.js一起使用

You can install them using npm:

您可以使用npm安装它们:

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

And then import and use them:

然后导入并使用:

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

Then you will download a zip file called download.zip, once you've extracted it, and you can find inside a file called idlist.txt, which has got two lines:

然后您将下载一个名为download的zip文件。一旦你提取了它，你就可以在一个名为idlist的文件中找到它。txt有两行:

PMID:29651880
PMID:29303721

And for your reference, I tested with the following browsers, and all passed:

为方便您参考，我用以下浏览器进行了测试，均通过:

Firefox 59.0.2 (Windows 10)
Firefox 59.0.2(Windows 10)
Chrome 65.0.3325.181 (Windows 10)
Chrome 65.0.3325.181(Windows 10)
Microsoft Edge 41.16299.371.0 (Windows 10)
微软Edge 41.16299.371.0 (Windows 10)
Internet Explorer 11.0.60 (Windows 10)
Internet Explorer 11.0.60 (Windows 10)
Opera 52 (Mac OSX 10.13)
Opera 52 (Mac OSX 10.13)
Safari 11 (Mac OSX 10.13)
Safari 11 (Mac osx10.13)

#1

#2