1. Use the JS library

  • Jszip -> zip files
  • File-saver -> generate the file

2. Implementation code

import JSZip from 'jszip'
import FileSaver from 'file-saver'
getFile = (url) => {
    returnnew Promise(resolve => { const xhr = new XMLHttpRequest(); // Avoid 200 from disk cache url = url + '? r=${Math.random()}`;
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
              resolve(xhr.response);
            } else{ resolve(); // Avoid image download failure, resulting in batch export failure}}; xhr.send(); }); } handleBatchDownload = async (selectImgList, idArray) => {const data = selectImgList; const zip = new JSZip(); const cache = {}; const promises = []; await data.forEach((item, Index) => {const promise = this.getFile(item). Then ((fileData) => {// Download file const arrName = item.split('/');
        letfileName = arrName[arrName.length - 1]; Const endIndex = filename.lastIndexof (decodeURIComponent) const endIndex = filename.lastIndexof ('. ');
        const format = fileName.slice(endIndex);
        const startName = fileName.slice(0, endIndex);
        const newFileName = decodeURIComponent(startName) + format;
        zip.file(newFileName, fileData as any, {
          binary: true}); // Add file cache one by one [newFileName] = fileData; }); promises.push(promise); }); Promise.all(promises).then(() => { zip .generateAsync({type: 'blob'}).then(async (content) => {// Generate binary stream; Use file-saver to save FileSaver. SaveAs (content, 'zip'); }); }); };Copy the code

3. Note

  • Request image resource asynchronous request
  • Downloading requires waiting for all images to complete