uniapp使用jsZip打包多个url文件，下载为一个压缩包

1.需求及前言

可选中多个文件（类型不限png、doc、xls、ppt等）点击下载时，将选中的文件全部打包成一个压缩包给用户。
本文讲解jszip这个插件的打包下载使用方法。

2.下载插件

npm install file-saver
npm install jszip

2.导入

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

3.封装为mixins文件

在项目根目录下新建mixins目录, mixins目录下新建blob.js文件
blob.js 代码

// blob.js

import { REFRESH_TOKEN, ACCESS_TOKEN } from '@/common/const.js'
import { getToken, getTokenAsnc, saveAccessToken } from '@/common/util/token'
import { baseApi } from '@/config/index.js'
import FileSaver from 'file-saver'
import JSZip from 'jszip'
export default {
	data() {
		return {
			header: {}
		};
	},
	methods: {
		// 在混入的父文件内直接调用即可
		// 传入的fileList参数格式为 [{name: '文件名'，type: 'doc', url: 'http:xxxx'}]
		handleDownload(fileList=[]) {
			const zip = new JSZip()
			const cache = {}
			const promises = []
			fileList.forEach(item => {
				const promise = this.getblob(item.url).then(data => {
					const name = item.name
					zip.file(name + '.' + item.type, data, {
						binary: true
					})
					cache[name] = data
				})
				promises.push(promise)
			})
			Promise.all(promises).then(() => {
				zip.generateAsync({
					type: 'blob'
				}).then(content => {
					console.log(content, promises);
					// 利用file-saver保存文件  自定义文件名
					saveAs(content, '文件下载.zip')
					// 下载成功提示
					this.$message({
						type: 'success',
						message: '下载成功！'
					})
				})
			})
		},
		// 从接口获取blob文件流
		async getblob(url) {
			// 请求头携带参数
			const accessToken = await getTokenAsnc(ACCESS_TOKEN)
			if (accessToken) {
				this.header.Authorization = accessToken
			} else {
				const refreshToken = await getTokenAsnc(REFRESH_TOKEN)
				if (refreshToken) {
					this.header.Authorization = refreshToken
				}
			}
			this.header["DeviceId"] = uni.$u.sys().deviceId
			
			return new Promise((resolve, reject) => {
				// 图片blob流
				uni.request({
					url: `${baseApi}v3/disk/downloadFile`, // 接口地址
					data: {
						path: url
					},
					responseType: 'arraybuffer', // 如道友用的uniapp 则响应格式设置为arraybuffer
					// responseType: 'blob', // 其他框架 可试试响应格式设置为blob
					header: {
						'Access-Control-Allow-Origin': '*', // 设置可以跨域
						...this.header // 请求头带的token等参数
					},
					success: (content) => {
						resolve(content.data)
					}
				});
			})
		},
	}
};

4.页面混入

在已混入的页面直接调用传参即可
index.vue

<template>
	<view>
		<button @click="downLoad">下载</button>
	</view>
</template>
<script>
	import blob from '@/mixins/blob.js'
	export default {
	mixins: [blob],
		data(){
			return{
				multipleSelection: [{
	          		"id": 18,
	                "create_time": "2023-07-31 11:31:44",
	                "name": "测试上传文件",
	                "type": "doc",
	                // 如该url地址不可用 可替换为自己的http url地址
	                "url": "https://saierwei-cms.oss-cn-shenzhen.aliyuncs.com/cms/file/20230731/16907743043735595.doc",
	                "size": null
	            }, {
	                "id": 25,
	                "create_time": "2023-08-02 10:24:19",
	                "name": "微信图片_20230324153545",
	                "type": "jpg",
	                "parent_id": 0,
	                "url": "https://saierwei-cms.oss-cn-shenzhen.aliyuncs.com/cms/images/20230802/16909430583905219.jpg",
	                "size": null
	            },{
	                "id": 31,
	                "create_time": "2023-08-02 10:54:10",
	                "name": "新建 PPT 演示文稿",
	                "type": "ppt",
	                "user_id": 135,
	                "url": "https://saierwei-cms.oss-cn-shenzhen.aliyuncs.com/cms/file/20230802/16909448504666375.ppt",
	                "size": 20992.0
	            }]
			}
		},
		methods: {
			downLoad() {
				this.handleDownload(this.multipleSelection)
			},
		}
	}
</script>

5.总结

1、在项目根目录下新建mixins目录
2、在新建mixins目录创建blob.js文件
3、在需要的页面混入blob.js（如下图）
4、调用handleDownload方法直接使用

各位道友下载好插件后，可直接复制上面两个文件到项目中进行体验。

注：可能在上述代码中出现跨域问题，如出现跨域问题可参考 跨域解决办法