项目要求数据的图片、表格、视频进行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
