VUE 前端打包ZIP

项目要求数据的图片、表格、视频进行zip压缩打包，刚开始的时候是后端返回链接直接下载，有点消耗服务器带宽。
然后就想着后端直接返回数据的链接，前端浏览器进行处理。

因为后端返回来的是 图片或者视频的链接 我们的进行处理转换文件流或者base64

首先利用 jszip 这个插件

//下载插件
npm --save install jszip file-saver
npm install  lrz  //图片链接转换base64的

创建download.js 文件

//引入插件
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import lrz from 'lrz'

export const downloadZip = (data, NickName) => {
      const zip = new JSZip()
      const img = zip.folder('images') //创建一个images文件夹
      //lrz转换base64
       lrz(‘图片的链接’).then(function(rst) {
              //因为JSZip插件传入base64中不能带 'data:image/jpeg;base64' 所有要删掉
              img.file('图片.png',rst.base64.replace(/^data:(image)\/(png|jpeg);base64,/,''),{ base64: true })
        }
        zip.file( 'exe.xlsx','表格的base64', { base64: true })//压缩表格
         xhrequest(‘需要转换视频的URL’).then((res) => {
               zip.file( '视频.mp4', res, { Blob: true,})
         })
    //这里就压缩了  type可以是blob或者base64
     zip.generateAsync({ type: 'blob' }).then(function(content) {
            // see FileSaver.js
            saveAs(content, 压缩包的名字 + '.zip')
        })

       //视频转换blob需要异步
    async function xhrequest(url) {
        let data = await fetch(url, { mode: 'cors' })
            .then((response) => response.blob())
            .then((res) => {
                return res
            })
        return data
    }
}

注意事项：jsZip这个插件添加的时候 名字不能重复有可能会被覆盖，所以名字添加的时候最好有个key
jszip链接：https://www.npmjs.com/package/jszip
lrz链接：https://www.npmjs.com/package/lrz