【前端实现文件打包下载】

安装以及使用

• npm i jszip file-saver -S
• 封装使用

import *  as JSZip from 'jszip'
import * as FileSaver from 'file-saver'

//files 数组 [{name 文件名,url 下载路径}] filename 打包文件名
// 定义方法函数
const download = (files, filename) => {
    let zip = new JSZip();
    let folder = zip.folder('files');// 新建一个文件
    Promise.resolve().then(() => {
      return files.reduce((accumulator, file) => {
        return accumulator.then(() => fetch(file.url)
          .then(resp => resp.blob())
        .then(blob => folder.file(`${file.name}.pdf`, new Blob([blob], { type: 'application/pdf' }))))
        //`${file.name}.pdf` 给文件设置名字  type: 'application/pdf' 则是文件格式 img 则改为对应的文件格式
      }, Promise.resolve())
    }).then(() => {
      folder.generateAsync({ type: "blob" }).then(content => FileSaver.saveAs(content, filename));
    })
  }
//将需要批量下载的文件处理为以下格式
   const files=[{name:'第一个pdf',url:'http://localhost:8080/weww1.pdf'},
              {name:'第二个pdf',url:'http://localhost:8080/weww2.pdf'},
              {name:'第三个pdf',url:'http://localhost:8080/weww3.pdf'} ]
//调用方法      
    download(files,'全部pdf') // 第二个参数为打包的文件名 name为每一个文件重命名的名字