Js package using the browser to download all types of files

Outline
ajax request is packaged download all types of files
canvas rendering package to download all pictures
related information
Author

Outline

Requirements: 1 project click on the button to download multiple files (pictures may be more, it could be many types of documents such as pdf excel picture compressed files of any type, etc.), and a plurality url in the browser address these together with the compressed file into a compressed package download to use this demo can be achieved. 2. If the load is too before the browser will download from the cache does not consume traffic downloaded again, and in this way but does not require the server packaged as a compressed package directly from the browser to download a good compression, such as Ali goes on oos the files can be downloaded directly through the browser does not need to pack again through the server to download the package, so this efficiency and speed are very fast.

Here Insert Picture Description

ajax request is packaged download all types of files

The benefits of using XMLHttpRequest ajax request is:
1. can download any type of file. 2. If the cached before the browser can load images directly from the cache. According to the array name may correspond, online methods are generally not correspond to the name. 3. Custom Error type text prompts to download

Download: ajax request is packaged download all types of source code files

canvas rendering package to download all pictures


<!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>