項(xiàng)目要求數(shù)據(jù)的圖片、表格、視頻進(jìn)行zip壓縮打包，剛開始的時候是后端返回鏈接直接下載，有點(diǎn)消耗服務(wù)器帶寬。
然后就想著后端直接返回數(shù)據(jù)的鏈接，前端瀏覽器進(jìn)行處理。

因?yàn)楹蠖朔祷貋淼氖?圖片或者視頻的鏈接 我們的進(jìn)行處理轉(zhuǎn)換文件流或者base64

首先利用 jszip 這個插件

//下載插件
npm --save install jszip file-saver
npm install  lrz  //圖片鏈接轉(zhuǎn)換base64的

創(chuàng)建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') //創(chuàng)建一個images文件夾
      //lrz轉(zhuǎn)換base64
       lrz(‘圖片的鏈接’).then(function(rst) {
              //因?yàn)镴SZip插件傳入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(‘需要轉(zhuǎn)換視頻的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')
        })

       //視頻轉(zhuǎn)換blob需要異步
    async function xhrequest(url) {
        let data = await fetch(url, { mode: 'cors' })
            .then((response) => response.blob())
            .then((res) => {
                return res
            })
        return data
    }
}

注意事項(xiàng)：jsZip這個插件添加的時候 名字不能重復(fù)有可能會被覆蓋，所以名字添加的時候最好有個key
jszip鏈接：https://www.npmjs.com/package/jszip
lrz鏈接：https://www.npmjs.com/package/lrz