html实现多文件打包下载 (mp4文件)

使用jszip.js和fileSaver.js实现打包并下载

由于公司简化项目，所以所有的功能都是通过websocket和录播联调，录制的多个节目需要打包下载，找了好多方法才找到sjzip，因此记录一下，以便以后再用到

一，需要引入的jar包

<!--使用jszip压缩视频文件-->
<script src="js/jszip.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>

jszip官网地址以及文档：

How to use JSZip (stuk.github.io)

jszip.js下载路径

jszip.js下载路径

注：因为jszip的文档都记录的是图片，或者文档类的，我想下载视频，搞了半天才搞成功，哈哈哈哈哈哈

二，js代码

<script>
	function  downloadAllFile(Hdrresource,Hdmovie){
    		//Hdrresource和Hdmovie都是两个数组
		var loc=window.location.href;
		var arr=loc.split("/");
		arr=arr[2];   //获取根路径
		var zip=new JSZip();
		//var imgData="http://ip:端口号/vod/mp4/"+arrays[0];
		//zip.file("Hello.txt","Hello World\n");  //创建Hello.txt文档
		//设置下载视频文件（高清资源模式）
		var packagename=zip.folder("高清资源模式"); //新创建的文件夹名称
		//base64图片需要去掉base图片标识
		if (Hdrresource!=undefined&&Hdrresource!=null&&Hdrresource!=""){
			for (let i = 0; i < Hdrresource.length; i++) {
				//file(文件名称，文件地址)
				packagename.file(Hdrresource[i],"http://"+arr+"/vod/mp4/"+Hdrresource[i]);  //向创建的文件夹中添加文件
			}
		}
		//设置下载视频文件（高清电影模式）
		var packagenamemovie=zip.folder("高清电影模式"); //新创建的文件夹名称
		//base64图片需要去掉base图片标识
		if (Hdmovie!=undefined&&Hdmovie!=null&&Hdmovie!=""){
			for (let i = 0; i < Hdmovie.length; i++) {
				//file(文件名称，文件地址)
				packagenamemovie.file(Hdmovie[i],"http://"+arr+"/vod/mp4/"+Hdmovie[i]);  //向创建的文件夹中添加文件
			}
		}
		zip.generateAsync({
			type:"blob", //压缩类型
			compression:"DEFLATE", //store:默认不压缩，defalte：需要压缩
			compressionOptions:{
				level:9  //压缩等级1--9, 1：压缩速度最快，9:最优压缩方式
			}
		})
		.then(function(content){
			//直接在浏览器打成qiwntao.zip包并下载，saveAs依赖的js是FileSaverjs
			saveAs(content,"视频文件.zip");
		})
	}
</script>

三，效果图