在项目开发中，搭档大佬要做一个断点续传的功能，让我帮忙研究一下前端将多个文件压缩成一个压缩包的方法，所以就有了这篇文章。

我的demo是写在vue中的，所以首先要有一个vue环境，才能进行接下来的步骤。那么下面我们就开始吧。

1.cmd搭建一个vuex项目，简单分为以下两个步骤，具体可参考：参考地址

        (1)npm install --global vue-cli

        (2)vue init webpack demo

2.在vue项目中安装jszip需要用到的相关插件

        (1)npm install jszip

         (2)npm install file-saver

        (3)npm install axios   

3.在代码中引入组件 

import axios from 'axios'
import JSZip from 'jszip'
// eslint-disable-next-line no-unused-vars
import FileSaver from 'file-saver'

 4.download.vue组件完整代码：

<template>
  <button @click="handleDownload">JSZip下载</button>
</template>
<script>
import axios from 'axios'
import JSZip from 'jszip'
// eslint-disable-next-line no-unused-vars
import FileSaver from 'file-saver'
export default {
  name: 'Download',
  data () {
    return {
      // 需要下载的文件，必须要有文件路径和文件名称
      fileList: [
        {path: 'https://img2.baidu.com/it/u=1384527102,933211906&fm=26&fmt=auto', fileName: 'img1.jpeg'},
        {path: 'https://img1.baidu.com/it/u=4156422628,3560808221&fm=26&fmt=auto', fileName: 'img2.jpeg'},
        {path: 'https://img2.baidu.com/it/u=3005034651,882371095&fm=26&fmt=auto', fileName: 'img3.jpeg'},
        {path: 'https://img2.baidu.com/it/u=3005034651,882371095&fm=26&fmt=auto', fileName: '11.pdf'}
      ]
    }
  },
  methods: {
    /**
     * 下载按钮点击事件
     */
    handleDownload () {
      const zip = new JSZip()
      const cache = {}
      const promises = []
      this.fileList.forEach(item => {
        console.log('item', item)
        const promise = this.getFile(item.path).then(data => {
          // eslint-disable-next-line camelcase
          const file_name = item.fileName
          zip.file(file_name, item.path, { binary: true })
          cache[file_name] = data
        })
        promises.push(promise)
      })
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
          // 生成二进制流
          // FileSaver.saveAs(content, '文件下载.zip') // 利用file-saver保存文件  自定义文件名
          // eslint-disable-next-line no-undef
          saveAs(content, '文件下载.zip') // 利用file-saver保存文件  自定义文件名
        })
      })
    },
    /**
     * 获取文件
     * @param url 文件路径
     * @returns {Promise<unknown>}
     */
    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url,
          responseType: 'blob'
          // responseType: 'arraybuffer'
        })
          .then(data => {
            console.log('data', data)
            resolve(data.data)
          })
          .catch(error => {
            reject(error.toString())
          })
      })
    }
  }
}
</script>

 5.代码结构如下：

6.实现结构如下：

 7.参考地址：

参考1

参考2