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

前端js使用jszip实现文件压缩功能相关推荐

手机上怎么压缩html文件夹,iphone手机怎么压缩文件 iphone自带文件压缩功能操作方法分享...
iphone手机怎么压缩文件?目前国内有着很多的用户都在使用着iphone手机,iphone手机上也是有着很多的操作功能的,很多的用户都还是不是很熟悉,比如想用iphone手机进行压缩文件,应该怎么操 ...
为应用程序增加文件压缩功能
[简介] --压缩文件可以认为是一个包装文件的容器.通过文件压缩,大量文件可以被打包起来并当作一个文件来看待.此外,压缩文件在尺寸上普遍比原文件小,如文本文件在压缩以后的平均大小是原来的40%.因此, ...
Node.js Express 应用启用资源压缩功能 - compression 库的应用
network 默认显示风格: 点击这个设置齿轮,选择 Use large request rows: 之后 size 显示格式如下: 每个大小单元格显示两个值. 上面的数值是下载资源的大小. 底部值 ...
前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题
问题描述: 前端通过jQuery ajax接受后端的文件流,前端下载文件后内容乱码后端代码: Header("Content-type: application/octet-stream& ...
egg.js ajax上传文件,上传图片功能不会使用
node 12.13.0 egg:2.28.0 前端代码: var formData = new FormData(); formData.append("file",file.r ...
js,html,java文件压缩,pdf转word,图片等
自己写了一个exe小工具,因为项目测试中需要对代码进行压缩,顺带做了一些加解密,以及文件生成等,下面来看看这个工具文末提供了下载地址,长期有效工具采用纯java开发,开发工具netbeans,GU ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
怎么将pdf文件压缩的小一点
我们都知道PDF文件不是单纯的文字内容的文档,PDF里面所包含的东西特别多,除了文字,还有图片.图形.颜色.字体等等,所以经常遇到体积较大的pdf文件,这时需要我们压缩一下,否则不利于我们传输保存.但 ...
WindowsXP中的文件加密功能及其使用
加密和解密文件与文件夹 Windows2000系列和WinXP专业版及Windows2003的用户都可使用内建的文件加密功能,但前提是准备加密的文件与文件夹所在的磁盘必须采用NTFS文件系统.同时要注 ...

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

一、jszip下载

二、引入jszip插件

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

四、解压zip文件

前端js使用jszip实现文件压缩功能相关推荐

最新文章

热门文章