JavaScript 下载解压zip文件

转载

月光倾城美 2024-09-23 21:50:06

文章标签 缓存 ajax css 文章分类 JavaScript 前端开发

浏览器中利用js打包下载所有类型文件

概述
ajax请求方式打包下载所有类型文件
canvas渲染方式打包下载所有图片
相关知识
作者

概述

需求：1.项目中在浏览器中点击按钮后根据多个url地址下载多个文件(可能是多个图片，也可能是多种类型文件如pdf excel 图片压缩文件任意类型等)，而且是这些文件一起压缩成一个压缩包一起下载利用这个demo就可以实现了。2.若浏览器之前加载过就会从缓存中下载不会再次耗费流量下载了，而且这种方式不需要经过服务器打包压缩而是直接从浏览器下载好后打包压缩的，例如阿里云oos上的文件可以直接通过浏览器打包下载不需要再次经过服务器打包下载了，因此这样的效率和速度都是很快的。

JavaScript 下载解压zip文件_css

JavaScript 下载解压zip文件_css_02

ajax请求方式打包下载所有类型文件

采用XMLHttpRequest ajax请求方式好处是：
1.能下载任意类型文件。2.如果浏览器之前缓存过，可以从缓存里面直接加载图片。名字可以根据数组一一对应，网上方法一般不能对应名字。3.自定义下载错误类型文本提示

下载地址：ajax请求方式打包下载所有类型文件源码

canvas渲染方式打包下载所有图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="https://cdn.bootcss.com/jszip/3.2.1/jszip.js"></script>
		<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
	</head>
	<body>
		<h2>采用canvas渲染方式好处是：不用再进行设置跨域设置了，服务器还是需要的。
		如果浏览器之前缓存过，可以从缓存里面直接加载图片。名字可以根据数组一一对应，网上方法一般不能对应名字。缺点是只能下载图片类型。
		<!-- QQ1092413979 -->
    </h2>
		<h2 id="tipId"></h2>
	</body>

	<script>
		var imagesUrl=["https://hx-pro.oss-cn-hangzhou.aliyuncs.com/68bb0ac4-af6e-41fa-9a91-462f128c82b5.jpg","https://hx-pro.oss-cn-hangzhou.aliyuncs.com/48ccd15f-c12f-4346-b761-048b6f564fce.png"];
		var imagesNames=["小老头.jpg","表情图.png"];
		var saveAsName="xx的照片信息";//保存后的文件信息
		var progressTipId="tipId";//
		
		packageImages();
		function packageImages() {

			var folderName = saveAsName; //保存后的文件信息
			var tipInfoId=progressTipId;//提示的进度信息



			$('#' + tipInfoId).text('下载中,请稍等......');

			var imgUrls = imagesUrl;//config.initialPreview;//下载地址
			var imgsSrc = [];
			var imgBase64 = [];
			var imageSuffix = []; //图片后缀
			var zip = new JSZip();
			//zip.file("readme.txt", "案件详情资料\n");
			var img = zip.folder(folderName);

			for (var i = 0; i < imgUrls.length; i++) {
				var src = imgUrls[i];
				var suffix = src.substring(src.lastIndexOf("."));
				imageSuffix.push(suffix);
				src = src ; //避免从浏览器缓存加载，导致失败+ "?x-oss-process=image/resize,m_lfit,h_1124,w_860&ran="+ Math.random()
				getBase64(src, i).then(function(data) {
					var imgBase64Obj = {
						index: data.index,
						val: data.val.substring(22)
					};

					imgBase64.push(imgBase64Obj);

					//console.log(base64);//处理成功打印在控制台
				}, function(err) {
					console.log(err); //打印异常信息
				});

			}

			function tt() {
				setTimeout(function() {
					if (imgUrls.length == imgBase64.length) {
						for (var i = 0; i < imgUrls.length; i++) {

							var fileName = imagesNames[imgBase64[i].index];//config.initialPreviewConfig[(imgBase64[i].index)].caption;//---下载名字

							img.file(fileName, imgBase64[i].val, {
								base64: true
							});
						}
						zip.generateAsync({
							type: "blob"
						}).then(function(content) {
							// see FileSaver.js
							saveAs(content, folderName + ".zip");
						});
						$('#' + tipInfoId).text('下载完成！');

					} else {
						//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
						$('#' + tipInfoId).text('已完成：' + imgBase64.length + '/' + imgUrls.length);
						tt();
					}
				}, 100);

			}
			tt();







			//以下两个函数以前是在外面的
			//传入图片路径，返回base64
			function getBase64(img, indexOf1) {
				function getBase64Image(img, indexOf2, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
					var canvas = document.createElement("canvas");
					canvas.width = width ? width : img.width;
					canvas.height = height ? height : img.height;

					var ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					//var dataURL = canvas.toDataURL();
					var dataURL = canvas.toDataURL("image/jpeg", 0.96);
					//var dataURL = canvas.toDataURL("image/jpeg", 1);
					var returnData = {
						index: indexOf2,
						val: dataURL
					}
					return returnData;
				}
				var image = new Image();
				image.crossOrigin = 'Anonymous';
				image.src = img;
				var deferred = $.Deferred();
				if (img) {
					image.onload = function() {
						deferred.resolve(getBase64Image(image, indexOf1)); //将base64传给done上传处理
					}
					return deferred.promise(); //问题要让onload完成后再return sessionStorage['imgTest']
				}
			}

		}
	</script>

</html>