streamsaver+zip-stream实现前端web大文件下载+打包成zip输出

这里是streamsaver的githup地址

引入方式

<script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script>

npm install streamsaver

实际使用中的代码

import streamSaver from 'streamsaver';//引入依赖
import ZIP from '../assets/js/zip-stream.js' //引入zip依赖
streamSaver.mitm = '/mitm.html'; //打包成zip包的过程，实际上是通过iframe打开一个远端的mitm.html地址，通过这个iframe来执行这一过程，你可以理解为第三方或者中间人，这一步是手动设置mitm.html为本地的文件，避免因为需要梯子才能打开的这种问题。

如上两张图所示，是几个引入文件在githup上的位置

mitm.html和sw.js在本地的项目中，记得要保持在同一文件夹下。

const fileStream = streamSaver.createWriteStream(`files.zip`);// 这里是打包之后的zip包名字
	const readableZipStream = new ZIP({
		async pull(ctrl) {
			for (let i=0;i<files.length;i++) {
				const res = await fetch(files[i].downLoadUrl); // 文件链接 
				const stream = () => res.body;   // 这个是 ReadableStream 类型 
				const name = files[i].fileName;  // 每一个文件名 
				ctrl.enqueue({ name, stream }); // 不断接收要下载的文件
			}
			ctrl.close();
		}
	});
	if (window.WritableStream && readableZipStream.pipeTo) {
		return readableZipStream.pipeTo(fileStream).then(() => console.log('压缩包下载完成'));
	}

这样就能直接使用了，具体的内容可能根据实际项目中的需要略有不同，可简单做修改即可。 代码中注释也标明了，具体是做什么的。