Question

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

我发现这个名为jszip的库可以完成这项任务，但它有已知和未解决的问题。

谢谢。

Answer 1

JSZip多年来一直在更新。现在，您可以在its GitHub repo

上找到它

它可以与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");
});

然后你将下载一个名为download.zip的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

使用新的HTML5文件API和类型化数组，您几乎可以在JavaScript中执行任何操作。但是，浏览器支持不会很好。我猜你的意思是“未解决的问题”。我建议暂时在服务器上执行此操作。例如，在PHP中，您可以使用this extension.

Answer 3

我建议直接使用 Node 内置库 Zlib ，其中包括图片;使用＆＃34;缓冲区＆＃34;在base 64中编码。而不是使用 npm 包。理由是：

Zlib是一个Node本地库 - 已经保持了近10年的最新状态 - 因此可以获得长期支持的证据
Node允许您使用缓冲区 - 即您可以将文本字符串/图像转换为原始二进制数据并使用Zlib以这种方式压缩它
轻松压缩和解压缩大型文件 - 利用节点流压缩MB或GB中的文件

你使用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来自node - require的每个本机模块都是ES5的一部分。如前所述的Zlib和fs模块，文件系统模块。

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

第2步： fs 模块，这允许您创建读取流，专门用于读取数据块。这将返回 readstream 对象;可读流

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

__注意：此readstream对象然后再次被管道传输;这种对readteam对象的管道链接可以无休止地发生，使管道非常灵活。

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

步骤3：然后将已经通过管道传输和压缩的readstream对象转换为writestream对象。

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

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

因此，此库允许您轻松输入文件路径并确定压缩文件的位置。如果需要，您也可以选择反向。

Answer 4

通过使用JSZIP，我们可以使用JavaScript生成并下载zip文件。为此，您必须遵循以下步骤

从http://github.com/Stuk/jszip/zipball/master下载jszip zip文件
解压缩zip并在dist文件夹中找到jszip.js文件

将jszip.js文件导入您的html文件中，如下所示

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

在代码中添加以下功能并调用

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

您可以从我的git存储库中下载示例代码（GIT link）

Answer 5

如果您不关心IE，client-zip比JSZip更快，更小，并且可以解决此问题（是的，这是我的库less的一个无耻但完全相关的插件）。 / p>

您将执行以下操作（例如，files可以是fetch响应的数组，尽管有许多受支持的输入）：

import { downloadZip } from "client-zip/index.js"
import FileSaver from "file-saver"

const content = await downloadZip(files).blob()
FileSaver.saveAs(content, "download.zip");

用法与Yuci的回答基本相同，但在2020年进行了更新。

Answer 6

JavaScript能够做到这一点，但不能以您可以信赖的跨浏览器方式实现。

但是，这可以使用服务器端语言轻松完成。如果您习惯使用PHP，那么PHP的ZIP函数文档是：http://php.net/manual/en/book.zip.php

如何使用JavaScript压缩文件

6 个答案: