前端js使用jszip实现文件压缩功能

一、jszip下载

1、github下载地址：https://github.com/Stuk/jszip

2、下载成功后解压，js插件在dist目录里

二、引入jszip插件

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

三、使用jszip对文件进行压缩和下载

<script type="text/javascript">
//创建JSZip实例对象
var zip = new JSZip();

//1.创建hello.txt文件，文件内容为Hello World
zip.file("hello.txt", "Hello World\n");

//2.创建一个demo文件夹，文件里里创建一个hello.txt文件，文件内容为Hello World
zip.folder("demo").file("hello.txt", "Hello World\n");

// 生成zip文件并下载
zip.generateAsync({
    type: 'blob',// 压缩类型
    compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩
    compressionOptions: {
        level: 9 // 压缩等级1~9 1压缩速度最快，9最优压缩方式
    }
}).then(function(content) {
    // 下载的文件名
    var filename = 'hello.zip';
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 下载内容转变成blob地址
    eleLink.href = URL.createObjectURL(content);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
});

</script>

四、解压zip文件

思路：后端将zip文件以二进制形式传输到前端，前端再解压还原，解压代码如下：

let zip = new JSZip();
var content="后端传过来的二进制数据";
zip.loadAsync(content).then(function(zip) {
    new_zip.file("hello.txt").async("string"); 
});

标签：文件,txt,zip,压缩,前端,js,jszip,eleLink,hello
来源： https://blog.csdn.net/qq15577969/article/details/115549729