前端VUE压缩文件zipjs的使用。

2,945 阅读2分钟

 通常来说一般是后端将压缩好的文件传过来,前端直接下载就好,无奈后端不给力做不了,只好前端来压缩了。

一、方案一(常规使用)

1、安装依赖

npm install jszip --save 

(不过我们公司是内网开发,而且安装依赖的环境有问题,导致无法安装依赖,后面介绍一种不安装依赖的用法。)

zip.js的用法非常简单

2、引入依赖

import FileSaver from "file-saver";
import JSZip from "jszip";

3、使用zip.js

选创建一个压缩按钮

  <div >      <button @click="download">压缩</button>  </div>

download方法 注释写得很详细,不解释

  methods:{    /**    * @method download - 文件压缩下载zip    */      download(){        // 创建JSzip对象        var zip = new JSZip();        // file 参数一名字 参数二 文件内容或文件流 参数三文件流格式 一般不用改动        // 创建名字为Hello的类型为txt的文件,内容为Hello World,光标换行        zip.file("Hello.txt", "Hello World\n");        // folder方法为创建文件夹 ,这里创建名字为images的文件夹。        var img = zip.folder("images");        // 创建一张image.png图片,参数二是文件流,文件流可以是base64和blob格式的,        // base64文件流不能带转换前缀 例如data:image/png;base64,        img.file("image.png", "base64流", {base64: true});        // 执行压缩方法,固定写法,不用改        zip.generateAsync({type:"blob"})        .then(function(content) {            FileSaver(content, "example.zip");        });      },  },

效果图如下

----------------------------------------------------------------------------------------------

上面已经满足大部分简单使用了,但公司因为一些特殊原因只能使用将压缩插件放在项目代码里的方式去进行引用。

二、方案二(特殊使用及注意点)

1、先随便找个项目用外网下载jszip依赖,然后在node_modules里面找到FileSaver.js和jszip.min.js文件,复制放到自己项目下,这里先直接放在自己需要用到的文件同目录下,后面再改,按照我右侧的引入方式引入,注意黄框的扩展引入,不然不生效

引用成功,使用与第一种方式一样,根据自己公司的业务场景来使用即可,下面贴一下公司使用的场景,下面是将后端多个文件下载,文件类型不限,有视频,照片,PDF等,将下载流转换成blob格式再绑定到zip对象上,等所有文件下载完成,进行压缩。

注意点:相同文件名和类型的文件只会有一个进行压缩,会造成压缩数目不对,所以一定要对相同文件名的不同文件进行标识。给相同文件名的文件加不同数字后缀即可。