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

最新推荐文章于 2024-06-07 14:26:56 发布

劣徒5520

最新推荐文章于 2024-06-07 14:26:56 发布

阅读量656

点赞数

本文链接：https://blog.csdn.net/weixin_45733134/article/details/103794749

版权

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

概述

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

在这里插入图片描述

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>

作者

QQ1092413979

劣徒5520

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浏览器中利用js打包下载所有类型文件

浏览器中利用js打包下载所有类型文件概述ajax请求方式打包下载所有类型文件canvas渲染方式打包下载所有图片相关知识作者概述需求：1.项目中在浏览器中点击按钮后根据多个url地址下载多个文件(可能是多个图片，也可能是多种类型文件如pdf excel 图片压缩文件任意类型等)，而且是这些文件一起压缩成一个压缩包一起下载利用这个demo就可以实现了。2.若浏览器之前加载过就会从缓存中下载不...
复制链接

扫一扫