fileSaver和JSZip实现多文件压缩下载

目录

1.下载jszip，fileSaver

2.jszip常用api

3.生成压缩包

zip.generateAsync(options, callback)options: 压缩的配置项1.type：返回的压缩文件类型​编辑 ​编辑​编辑​编辑

2.compression：压缩方法

3.compressionOptions：压缩的级别

4.fileSaver: 浏览器下载

4.1安装file-saver

4.2file-saver的用法

5.多文件压缩下载

---

1.下载jszip，fileSaver

npm i file-saver jszip -s

2.jszip常用api

file(name,  content, options)

name：文件名字（必填）

content：文件内容（必填）

options：配置项

1.  base64：数据为base64，则设置为true
2. binary：二进制文件
3. data：修改的日期
4. compression：压缩方法
5. compressionOptions：设置压缩方法的配置项
6. comment：注释

const zip = JSZip() //创建一个zip压缩实例

zip.file("hello.txt", "helloe world") //给zip中添加一个file文件

zip.file("hello.txt") //获取hello.txt这个文件

const folder = zip.folder("imgs") //创建一个imgs的文件夹

folder.file("img.txt", "我是imgs里面的文件") //朝imgs文件夹里面添加一个文件

folder.file("test.txt", "test", { binary: false }) //一个纯文本的file文件

zip.remove("imgs") //删除imgs文件夹

zip.remove("hello.txt") //删除hello.txt 文件

zip.forEach((relativePath, file) => {
    console.log("file", file)
    console.log("relativePath", relativePath)
}) //遍历zip的每个文件

3.生成压缩包

zip.generateAsync(options, callback)

options: 压缩的配置项
1.type：返回的压缩文件类型 ​编辑​编辑​编辑

zip.generateAsync({ type: "blob" })

2.compression：压缩方法

        STORE：不压缩

        DEFLATE：压缩

zip.generateAsync({ compression: "DEFLATE", compressionOptions: { level: 9 } })

3.compressionOptions：压缩的级别

        level：1到9之间的数字，级别1最快，级别9压缩率最高

callback：每次调用generateAsync都会触发

zip.generateAsync({ type: "blob" }, (data) => {
    const { percent, currentFile } = data
})

4.fileSaver: 浏览器下载

4.1安装file-saver

npm i file-saver

4.2file-saver的用法

saveAs是常用来下载本地文件的方法

基本语法是saveAs(data, filename, options)

data：下载的数据，可以是file对象，也可以是blob对象

filename：下载的文件名（若data是file对象时；filename默认为file对象的文件名）

import fileSaver from "file-saver"

const blob = new Blob(["21"]);

fileSaver.saveAs(blob, "test.txt")

5.多文件压缩下载

const upload = document.querySelector("input[type=file]"); //获取上传文件的选择框

upload.addEventListenner("change", (e) => {
    const files = e.target.files;

    cosnt zip = JSzip(); //创建压缩包

    files.forEach(item => {
        
        zip.file(item)
    })

    zip.generateAsync({ type: blob }).then(res => {
        let filename = `${Date.now()}-img`
        
        saveAs(res, filename)
    })
})