有没有办法使用 JavaScript 压缩文件？例如，在 Yahoo 邮件中，当您选择从电子邮件中下载所有附件时，它会被压缩并下载到单个 zip 文件中。JavaScript 有能力做到这一点吗？如果是这样，请提供一个编码示例。
我找到了这个名为jszip的库来完成这项任务，但它存在已知和未解决的问题。
我该如何解决这个问题？
84298 次
6 回答
38
JSZip 多年来一直在更新。现在你可以在它的 GitHub repo上找到它
它可以与FileSaver.js一起使用
您可以使用 npm 安装它们：
npm install jszip --save
npm install file-saver --save
然后导入并使用它们：
import JSZip from 'jszip';
import FileSaver from 'file-saver';
const 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
供大家参考，我用以下浏览器测试过，都通过了：
- 火狐 59.0.2 (Windows 10)
- 铬 65.0.3325.181 (Windows 10)
- 微软边缘 41.16299.371.0 (Windows 10)
- Internet Explorer 11.0.60 (Windows 10)
- 歌剧 52 (Mac OSX 10.13)
- Safari 11 (Mac OSX 10.13)
于 2018-04-14T22:57:38.880 回答
10
如果你不关心 IE，client-zip比 JSZip 更快更小，旨在解决这个问题（是的，这是我的库的一个无耻但完全相关的插件）。
你会做这样的事情（例如，其中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 年更新。
于 2020-09-04T10:02:24.340 回答
7
通过使用 JSZIP，我们可以在 JavaScript 中生成和下载 zip 文件。为此，您必须按照以下步骤操作
- 从http://github.com/Stuk/jszip/zipball/master下载 jszip 压缩文件
- 解压 zip 并在 dist 文件夹中找到 jszip.js 文件
在您的 html 文件中导入 jszip.js 文件，如下所示
<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 链接）
于 2018-10-05T06:02:46.783 回答
4
我建议直接使用Node 的内置库Zlib，其中包括图像；使用“缓冲区”以 base 64 编码。而不是使用npm包。原因是：
- Zlib 是一个 Node 原生库- 近 10 年来一直保持最新状态 - 所以那里有长期支持的证明
- Node 允许您使用缓冲区- 即您可以将文本字符串/图像转换为原始二进制数据并使用 Zlib 以这种方式压缩它
- 轻松压缩和解压缩大文件- 利用节点流以 MB 或 GB 为单位压缩文件
您使用 jszip 的事实让我猜测您使用的是 npm 和 node；假设您已正确设置环境，即全局安装节点。
示例：将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，专门调用来读取数据块。这将返回一个readstream对象；可读流
const input = fs.createReadStream(FILE PATH HERE);
__注意：这个 readstream 对象会再次被管道化；readsteam 对象上的这种管道链接可以无休止地发生，使管道非常灵活。
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
因此，此库允许您轻松输入文件路径并决定压缩文件的位置。如果需要，您也可以选择反向操作。
于 2018-04-15T00:45:29.930 回答
1
我开发了一种使用 JavaScript 生成 zip 文件的新解决方案。解决方案在公共领域。
邮编类。
Zip {
constructor(name) {
this.name = name;
this.zip = new Array();
this.file = new Array();
}
dec2bin=(dec,size)=>dec.toString(2).padStart(size,'0');
str2dec=str=>Array.from(new TextEncoder().encode(str));
str2hex=str=>[...new TextEncoder().encode(str)].map(x=>x.toString(16).padStart(2,'0'));
hex2buf=hex=>new Uint8Array(hex.split(' ').map(x=>parseInt(x,16)));
bin2hex=bin=>(parseInt(bin.slice(8),2).toString(16).padStart(2,'0')+' '+parseInt(bin.slice(0,8),2).toString(16).padStart(2,'0'));
reverse=hex=>{
let hexArray=new Array();
for(let i=0;i<hex.length;i=i+2)hexArray[i]=hex[i]+''+hex[i+1];
return hexArray.filter((a)=>a).reverse().join(' ');
}
crc32=r=>{
for(var a,o=[],c=0;c<256;c++){
a=c;
for(var f=0;f<8;f++)a=1&a?3988292384^a>>>1:a>>>1;
o[c]=a;
}
for(var n=-1,t=0;t<r.length;t++)n=n>>>8^o[255&(n^r[t])];
return this.reverse(((-1^n)>>>0).toString(16).padStart(8,'0'));
}
fecth2zip(filesArray,folder=''){
filesArray.forEach(fileUrl=>{
let resp;
fetch(fileUrl).then(response=>{
resp=response;
return response.arrayBuffer();
}).then(blob=>{
new Response(blob).arrayBuffer().then(buffer=>{
console.log(`File: ${fileUrl} load`);
let uint=[...new Uint8Array(buffer)];
uint.modTime=resp.headers.get('Last-Modified');
uint.fileUrl=`${this.name}/${folder}${fileUrl}`;
this.zip[fileUrl]=uint;
});
});
});
}
str2zip(name,str,folder){
let uint=[...new Uint8Array(this.str2dec(str))];
uint.name=name;
uint.modTime=new Date();
uint.fileUrl=`${this.name}/${folder}${name}`;
this.zip[uint.fileUrl]=uint;
}
files2zip(files,folder){
for(let i=0;i<files.length;i++){
files[i].arrayBuffer().then(data=>{
let uint=[...new Uint8Array(data)];
uint.name=files[i].name;
uint.modTime=files[i].lastModifiedDate;
uint.fileUrl=`${this.name}/${folder}${files[i].name}`;
this.zip[uint.fileUrl]=uint;
});
}
}
makeZip(){
let count=0;
let fileHeader='';
let centralDirectoryFileHeader='';
let directoryInit=0;
let offSetLocalHeader='00 00 00 00';
let zip=this.zip;
for(const name in zip){
let modTime=()=>{
lastMod=new Date(zip[name].modTime);
hour=this.dec2bin(lastMod.getHours(),5);
minutes=this.dec2bin(lastMod.getMinutes(),6);
seconds=this.dec2bin(Math.round(lastMod.getSeconds()/2),5);
year=this.dec2bin(lastMod.getFullYear()-1980,7);
month=this.dec2bin(lastMod.getMonth()+1,4);
day=this.dec2bin(lastMod.getDate(),5);
return this.bin2hex(`${hour}${minutes}${seconds}`)+' '+this.bin2hex(`${year}${month}${day}`);
}
let crc=this.crc32(zip[name]);
let size=this.reverse(parseInt(zip[name].length).toString(16).padStart(8,'0'));
let nameFile=this.str2hex(zip[name].fileUrl).join(' ');
let nameSize=this.reverse(zip[name].fileUrl.length.toString(16).padStart(4,'0'));
let fileHeader=`50 4B 03 04 14 00 00 00 00 00 ${modTime} ${crc} ${size} ${size} ${nameSize} 00 00 ${nameFile}`;
let fileHeaderBuffer=this.hex2buf(fileHeader);
directoryInit=directoryInit+fileHeaderBuffer.length+zip[name].length;
centralDirectoryFileHeader=`${centralDirectoryFileHeader}50 4B 01 02 14 00 14 00 00 00 00 00 ${modTime} ${crc} ${size} ${size} ${nameSize} 00 00 00 00 00 00 01 00 20 00 00 00 ${offSetLocalHeader} ${nameFile} `;
offSetLocalHeader=this.reverse(directoryInit.toString(16).padStart(8,'0'));
this.file.push(fileHeaderBuffer,new Uint8Array(zip[name]));
count++;
}
centralDirectoryFileHeader=centralDirectoryFileHeader.trim();
let entries=this.reverse(count.toString(16).padStart(4,'0'));
let dirSize=this.reverse(centralDirectoryFileHeader.split(' ').length.toString(16).padStart(8,'0'));
let dirInit=this.reverse(directoryInit.toString(16).padStart(8,'0'));
let centralDirectory=`50 4b 05 06 00 00 00 00 ${entries} ${entries} ${dirSize} ${dirInit} 00 00`;
this.file.push(this.hex2buf(centralDirectoryFileHeader),this.hex2buf(centralDirectory));
let a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([...this.file],{type:'application/octet-stream'}));
a.download = `${this.name}.zip`;
a.click();
}
}
然后，创建一个新对象 Zip。
z=new Zip('myZipFileName');
你可以：
- 使用 fecth2zip(filesArray,folder) 将目录中的文件加载到 zip 对象。
filesArray=[
'file01.ext',
'file02.ext',
'file...'
];
z.fecth2zip(filesArray,'public/');
- 使用 str2zip(nameFile,content,directory) 从字符串创建一个新文件。
z.str2zip('test.txt','content','public/teste/');
或者上传到zip。
将 onchange 事件放入输入文件并将文件发送到函数 files2zip(this.files)。
<input type="file" onchange="z.files2zip(this.files)" value='files' multiple>
将所有对象放入 Zip 对象文件后，只需下载它。
<input type="button" onclick="z.makeZip()" value='Zip'>
该课程也可以在这里找到：https ://github.com/pwasystem/zip/
于 2021-09-15T12:53:06.790 回答
0
使用新的 HTML5 文件 API 和类型化数组，您几乎可以在 JavaScript 中做任何您想做的事情。但是，浏览器支持不会很好。我猜这就是您所说的“未解决的问题”。我建议暂时在服务器上进行。例如，在 PHP 中，您可以使用此扩展。
于 2011-12-22T19:26:39.590 回答