前端实现打包下载多文件

该方式实现在vue项目

1、安装依赖

npm i jszip

npm i file-saver

2、打包方法

import JSZip from 'jszip'

import saveAs from 'file-saver'

downloadFiles (files, filename) {

      const zip = new JSZip()

      const folder = zip.folder('files')

      return Promise.resolve().then(() => {

        return files.reduce((accumulator, file) => {

          return accumulator.then(() => fetch(file.url)

            .then(resp => resp.blob())

            .then(blob => folder.file(file.fileName, blob)))

        }, Promise.resolve())

      }).then(() => {

        folder.generateAsync({ type: 'blob' }).then(content => {

          saveAs(content, filename)

        })

      })

    }