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

我的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 camelcaseconst file_name = item.fileNamezip.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-undefsaveAs(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