526互联

前端多文件打包下载方案

发布时间 2024-01-04 15:15:50作者: 懒惰ing

npm install jszip file-saver --save

import JSZip from 'jszip'
import { saveAs } from 'file-saver'
export const downloadFiles = (fileUrls, folderName = '下载') => {
  const folder = zip.folder(folderName);
  const downloadTasks = fileUrls.map((fileUrl) => {
    return fetch(fileUrl).then((imageContent) => {
      const name = fileUrl.split('/')[fileUrl.split('/').length - 1];
      // 写入二进制内容文件
      folder.file(name, imageContent.blob(), { binary: true });
    });
  });
  Promise.all(downloadTasks).then(() => {
    zip.generateAsync({ type: 'blob' }).then((content) => {
      // 写入本地
      saveAs(content, folderName);
    });
  });
};