JS创建ZIP文件，JSZip的使用

Posted 2023-02-05 HackShendi

Hi I’m Shendi

---

最近编写压缩工具，需要使用js创建zip文件，使用 JSZip 插件

官网： https://stuk.github.io/jszip/

Github： https://github.com/Stuk/jszip

https://sdpro.top/blog/html/article/1012.html

下载

NPM : npm install jszip

bower : bower install Stuk/jszip

component : component install Stuk/jszip

直接下载js : download JSZip 引入 dist/jszip.js 或 dist/jszip.min.js

使用

首先需要创建对象

var zip = new JSZip();

创建文件使用 file 函数

.file(name, content)

其中name为文件名，content为文件内容

创建/选择文件夹使用 folder 函数

.folder(name)

以上两个函数都有返回值，返回值为 JSZip 对象，也就是可以链式调用

例如创建一个test.txt文件和test文件夹，test文件夹内又有一个test.txt文件

var zip = new JSZip();
zip.file("test.txt", "shendi").folder("test").file("test.txt", "shendi");

选择目录

直接使用new JSZip()创建的对象为根目录，而后使用 folder 函数创建的文件夹返回的对象为子目录

例如

var zip = new JSZip();
var testZip = zip.folder("test");
testZip.file("test.txt", "Shendi");

zip.file("test2.txt", "Shendi");

以上代码执行后，根目录有test2.txt文件和test文件夹，test文件夹内有test.txt文件

可以通过 file 函数访问文件内容

var zip = new JSZip();
zip.file("test.txt").async("string").then(function (data) 
    // data为文件的内容
);
if (JSZip.support.uint8array) 
  zip.file("test.txt").async("uint8array").then(function (data) 
    // data 为 Uint8Array 类型
  );

删除文件/文件夹

使用 remove 函数删除

.remove(name)

删除文件夹会将文件夹内所有内容也跟着删除

可以通过 loadAsync 函数读取 zip 文件

.loadAsync(data)

var new_zip = new JSZip();
// more files !
new_zip.loadAsync(content)
.then(function(zip) 
    // you now have every files contained in the loaded zip
    zip.file("hello.txt").async("string"); // a promise of "Hello World\\n"
);

生成zip文件

zip.generateAsync(type:"base64").then(function (base64) 
    location.href="data:application/zip;base64," + base64;
);

这里最大的问题是文件名非常尴尬，Firefox生成的文件名如a5sZQRsx.zip.part（请参见错误367231和532230），Safari仅使用Unknown（未知）就不太好了。

或通过以下方式下载zip文件

zip.generateAsync(type:"blob").then(function (base64) 
    var tmp = document.createElement('a');
    tmp.download = "test.zip";
    tmp.style.display = 'none';
    tmp.href = URL.createObjectURL(base64);
    document.body.appendChild(tmp);
    tmp.click();
    document.body.removeChild(tmp);
);

这两种方法都不支持ie，具体可参考官网文档

END