持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

打包压缩文件

下包

yarn add file-saver jszip

//如果用TS

yarn add @types/file-saver @types/jszip

引入

import { saveAs } from 'file-saver' //saveAs()从文件保护程序导入
import JSZip from 'jszip'

复制代码

封装一个工具函数

export const function setPhotosZip=()=> {
    。。。
}

复制代码

创建一个zip实例

const zip = new JSZip()
复制代码

创建一个名为img的对象其有一个名为Code的文件夹

注：这里已打包压缩数组中图片为例

    const img = zip.folder("Code")
复制代码

循环遍历含有图片的数据数组ListData

    this.listData.forEach((item) => { 
      。。。
    })
复制代码

获取每一项的url属性的base64图片数据

const basePic = item.url.replace(/^data:image\/(png|jpg);base64,/, "");     
复制代码

使用每一项的name.png作为文件名的文件将对应项的图片数据储存起来，并存储到img对象对应的Code文件夹中

img.file(item.name + '.png', basePic, { base64: true });  // 将图片文件加入到zip包内
复制代码

jszip使用FileSaver压缩文件固定格式

    zip.generateAsync({ type: "blob" }) 
    .then(function (content) {
        saveAs(content, "Photo.zip");  //Photo.zip为生成zip后的文件名
      });
复制代码

注：.generateAsync可将类型为blob类型的转成一个类似zip文件的表达形式

压缩本地zip

export const setZip=(e:React.ChangeEvent<HTMLInputElement>)=> {
  // console.log(1); 
  const zip = new JSZip()
let cc=e.target.files![0]  
const test = zip.folder(cc.name)!; 
// console.log(test,'1');
  test.file(cc.name,cc );
      zip.generateAsync({ type: "blob" })
        .then(function (content: string | Blob) {
          saveAs(content,`${cc.name}.zip`)
        });
}
复制代码

使用 <input type='file' onChange={(e)=>setZip(e)}/>

读取zip文件

准备工作

先压缩一个test.zip

export const setTestZip=()=> {
const zip = new JSZip();  
const test = zip.folder("TT");   
test.file("hello.txt", "Hello World\n");
    zip.generateAsync({ type: "blob" })
      .then(function (content) {
        saveAs(content, "test.zip"); 
      });
}

复制代码

读取本地zip

export const getTestZip=(e:React.ChangeEvent<HTMLInputElement>)=> {
// 参数originFileObj我传入的是File文件对象，在此为压缩包
const zip = new JSZip()
let  originFileObj=e.target.files![0]
zip.loadAsync(originFileObj).then((res) => {
  console.log('resFile', res) 
  res.file('TT/hello.txt')?.async('blob').then((data) => {
    console.log('data', data, new File([data], 'jj.txt', {//自定义名称
    	type: 'application/json'
    })) //为最终所得File对象
  })
})
}
复制代码

使用 <input type='file' onChange={(e)=>getTestZip(e)}/>

读取远程zip

import request from  '@/utils/request';//自己封装一个工具函数处理请求数据
import JSZip from 'jszip';
let new_zip = new JSZip()
export const getTelefileZip()=>{
request({
  method : "GET",
  url : "http://.../file.zip",//网络地址
  encoding: null 
}, function (error, response, body) {
  if(error ||  response.statusCode !== 200) {
    return;
  }
  new_zip.loadAsync(body).then(function (zip) {
    return zip.file("test.txt").async("string");
  }).then(function (text) {
    console.log(text);
  });
});
}

复制代码

批量获取文件并打包下载

获取文件

import JSZip from 'jszip';
import FileSaver from 'file-saver';
import request from  '@/utils/request';//自己封装一个工具函数处理请求数据

const getFile = (url: string) => {
  return new Promise((resolve, reject) => {
    request(url, {
      method: 'GET',
      responseType: 'blob'
    }).then((res:any) => {
      resolve(res)
    }).catch((error: any) => {
      reject(error)
    })
  })
}

复制代码

打包压缩上线

/**
 * 打包压缩下载
 * @param data  源文件数组
 * @param fileName  压缩文件的名称
 */
const compressAndDownload = (data: any[], fileName ?: string) => {
  const zip = new JSZip();
  const promises: any[] = [];  //用于存储多个promise
  data.forEach((item: any) => {
    const promise = getFile(item.fileUrl).then((res: any) => {
      const fileName = item.fileName
      zip.file(fileName, res ,{binary: true});
    })
    promises.push(promise)
  })

  Promise.all(promises).then(() => {
    zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",  // STORE：默认不压缩 DEFLATE：需要压缩
      compressionOptions: {
        level: 9               // 压缩等级1~9    1压缩速度最快，9最优压缩方式
      }
    }).then((res: any) => {
      FileSaver.saveAs(res, fileName ? fileName : "压缩包.zip") // 利用file-saver保存文件
    })
  })
}

export default compressAndDownload
复制代码