客户端将URL文件或图片通过jszip打包成zip压缩包

前言

项目开发过程中关于一个订单所有附件的导出引发的一个问题，刚开始的时候在后端打包并压缩，返回stream流给前端，前端通过a标签下载流，但是在文件比较大的时候会出现问题，后端压缩的时候采用的是archiver，前端压缩的时候采用的是jszip

服务端

archiver压缩返回流

压缩文件示例代码：

let zip = archiver('zip')
let zipFileCount = 0

// 读取文件
let resFile = request.get(f);
// 获取文件扩展名
let fileExtension = f.split('.').pop();
// 添加压缩文件
zip.append(resFile, {name: `${filename}${index > 0 ? index : ''}.${fileExtension}`});
// 记录压缩文件个数
zipFileCount++;

// 结束
zip.finalize();

返流示例代码：

// 服务端采用nodejs的Koa2框架
ctx.attachment(attachmentFileName)
ctx.body = zipFileStream

客户端

客户端通过OSS的URL链接将图片转为base64格式，再通过jszip插件将图片压缩，这样可以直接将压缩后的文件保存到客户端本地，服务端压力也会减小很多

图片URL转base64示例代码：

/**
 * 图片链接转base64
 * @param imgUrl
 * @returns {Promise<any>}
 */
export const getBase64 = (imgUrl) => {
  return new Promise(((resolve, reject) => {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    // 至关重要
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        //得到一个blob对象
        var blob = this.response;
        // 至关重要
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
          let base64 = e.target.result;
          resolve(base64)
        };
        oFileReader.readAsDataURL(blob);
      }
    }
    xhr