react JSZip-压缩文件下载本地

项目场景：

前端处理一些批量文件或者图片时候，通过使用异步上传，减少表单一次性提交的的数据量。但是图片或者文件有删除的时候，服务器上真实的图片不容易删除。JSZip这个技术，可以将文件或者图片打包成一个Zip文件。这就大大减少了数据的传输量

---

解决方案：

提示：JSZip官网 ----------NPM链接
下载:npm i jszip

引入：

const JsZip = require('jszip');或 import JSZip from 'JSZip';

代码：

  /**
 * 路径地址转化成 blob，若本身是blob则无需转化
 */
const getBlob = (url) => {
    return new Promise((resolve) => {
      const xhr = new XMLHttpRequest();

      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.response);
        }
      };

      xhr.send();
    });
  };
  /**
 * 下载
 */
const ownloadBlobUrl(blobUrl, filename) {
  console.log(blobUrl);
  const eleLink = document.createElement('a');
  eleLink.style.display = 'none';
  // let filename = new Date().getTime() + '.xls';
  eleLink.href = blobUrl;
  eleLink.download = filename;
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);
  window.URL.revokeObjectURL(blobUrl);
}
  /**
 * 批量压缩，下载压缩包
 */
const batchDownload = () => {
    let path = [{ name: 'text1', filePath: '1.jpg' },{ name: 'text2', filePath: '2.jpg' }];
    //引入jszip
    const JsZip = require('jszip');
    const zip = new JsZip();
    dataSource.forEach((i) => {
      if (selectedRowKeys.includes(i.id))
        path.push({ name: i.certificateName, filePath: i.filePath });
    });
    path.forEach((item, index) => {
      getBlob(IMG_API + item['filePath']).then((blob) => {
        zip.file(item.name, blob, { base64: true });
        if (index + 1 === path.length)
          zip
            .generateAsync({
              type: 'blob', // 压缩类型
              compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
              compressionOptions: {
                level: 9, // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                // [1和9压缩的力度不大，相差100字节左右]
              },
            })
            .then(function (content) {
              downloadBlob(content, dataRef.data.deviceName + 'text');
            });
      });
    });
  };