前端图片多张批量下载，zip包

查阅资料，记录总结：

 //批量下载点击事件
    $(function () {
      $('.fn-left').on('click', '.batdowload_btn', function () {
        let imgsSrc = [];

        let time = new Date();
        let Month =
          time.getMonth() + 1 <= 9
            ? '0' + '' + (time.getMonth() + 1)
            : time.getMonth() + 1;
        let Data =
          time.getDate() + 1 <= 9
            ? '0' + '' + time.getDate()
            : time.getDate();
        let resDate = time.getFullYear() + '' + Month + '' + Data;

        $('#j-list td.checkbox input').each(function () {//input 勾选的图片
          let url =
            $(this).attr('data-url').trim().split(' ')[0] +
            '?time=' +
            new Date().valueOf();
          this.checked && imgsSrc.push(url);
        });
        
        let imgBase64 = []; //base64图片
        let zip = new JSZip();
        let img = zip.folder('今日图片' + resDate);

        for (var i = 0; i < imgsSrc.length; i++) {
          getBase64(imgsSrc[i], function (base64) {
            imgBase64.push(
              base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, '')
            );
            if (imgsSrc.length == imgBase64.length) {
              for (var i = 0; i < imgsSrc.length; i++) {
                imgsSrc[i] = imgsSrc[i].split('?')[0];
                img.file(imgsSrc[i].split('/')[5], imgBase64[i], {
                  base64: true,
                });
              }
              zip
                .generateAsync({
                  type: 'blob',
                })
                .then(function (content) {
                  saveAs(content, '今日图片' + resDate + '.zip');
                  parent.pizzaCmd.history.refresh();
                });
            }
          });
        }
      });
    });

    // 批量下载方法
    function getBase64(img, callback) {
      fetch(img)
        .then((res) => res.blob())
        .then((res) => {
          let fr = new FileReader(); //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
          fr.onload = function (e) {
            callback(e.target.result);
          };
          fr.onerror = function () {
            console.log('读取错误！');
          };
          fr.readAsDataURL(res); //如果是转文字，第二个参数可以使用编码
        });
    }