jsZip将多个文件压缩成一个压缩包

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

我的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

jsZip将多个文件压缩成一个压缩包相关推荐

批处理使用WinRAR压缩某类型的文件，一个文件压缩成一个压缩包，压缩后名称与原文件同名，压缩后删除原文件
@echo off setlocal enabledelayedexpansion rem winrar安装目录,我的在D盘且目录为下 cd D:\Program Files\WinRAR rem 需 ...
压缩base 64字符串_ftp下载多个文件，ftp下载多个文件打包成一个压缩包
在一些日常的网络批量维护工作中,经常需要使用ftp计划任务,定时上传或下载多个文件.对不太了解ftp命令和windows计划任务的新手来说,确实是一个很棘手的问题.今天我们来看看如何简单的实现这功能. ...
FTP下载多个文件打包成一个压缩包
@RequestMapping("downloadsByplFromFTP") @ResponseBody public void downloadsByplFr ...
Java把文件压缩成.zip压缩包和解压.zip压缩包(ZipOutputStream、ZipInputStream)
文章目录压缩成.zip 解压.zip 压缩成.zip 代码如下: /*** 压缩成ZIP** @param srcDir 压缩文件夹路径* @param out 压缩文件输出流* @throws R ...
Java实现文件压缩与解压[zip格式,gzip格式]
原文:http://www.cnblogs.com/visec479/p/4112881.html#3069573 Java实现ZIP的解压与压缩功能基本都是使用了Java的多肽和递归技术,可以对单个 ...
java gzip 解压文件_Java实现文件压缩与解压[zip格式,gzip格式]
原文:http://www.cnblogs.com/visec479/p/4112881.html#3069573 Java实现ZIP的解压与压缩功能基本都是使用了Java的多肽和递归技术,可以对单个 ...
java文件压缩与解压_Java实现文件压缩与解压
Java实现ZIP的解压与压缩功能基本都是使用了Java的多肽和递归技术,可以对单个文件和任意级联文件夹进行压缩和解压,对于一些初学者来说是个很不错的实例.(转载自http://www.puiedu. ...
python解压文件_使用Python实现文件压缩和解压
大家可能都熟悉.zip格式的文件.它可以把多个文件,压缩成一个文件.这在网络上传输时很有用,而且节省硬盘空间. 接下来,我们使用Python实现压缩和解压. 读取ZIP文件信息要读取ZIP文件的内容 ...
c++创建文件_使用Python实现文件压缩和解压
(点击上方快速关注并设置为星标,一起学Python) 来源:网络大家可能都熟悉.zip格式的文件.它可以把多个文件,压缩成一个文件.这在网络上传输时很有用,而且节省硬盘空间. 接下来,我们使用Pyt ...
python调用程序压缩文件_Python实现文件压缩和解压的示例代码
大家可能都熟悉.zip格式的文件.它可以把多个文件,压缩成一个文件.这在网络上传输时很有用,而且节省硬盘空间. 接下来,我们使用Python实现压缩和解压. 读取ZIP文件信息要读取ZIP文件的内容 ...

jsZip将多个文件压缩成一个压缩包

jsZip将多个文件压缩成一个压缩包相关推荐

最新文章

热门文章