JS下载文件、图片，JS打包下载

RainingTime

已于 2022-10-17 17:49:03 修改

阅读量1.7k

点赞数

分类专栏：前端解决办法文件下载文章标签：前端图片下载打包下载 JS下载文件

于 2022-10-17 17:41:11 首次发布

本文链接：https://blog.csdn.net/qq_33427869/article/details/127370164

版权

解决办法同时被 3 个专栏收录

17 篇文章 3 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

文件下载

2 篇文章 0 订阅

订阅专栏

前段时间搞前端下载图片的功能，要求点击即下载，同时支持打包下载，并且支持多浏览器。

以前都是用<a>标签加download属性，但是这种方法只在极少数情况下可以下载，大多情况都是直接在浏览器展示出来的。

于是开始百度各路大神，终于找到了完美的解决办法。

经测试后，不仅可以下载图片，网络上的任何资源都可以下载，简直太完美了。

现在就分享下JS代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JS文件下载</title>
	<script src="./js/jquery.js"></script>
    <!-- FileSaver.min.js：文件下载，见：https://www.jq22.com/jquery-info11353 -->
	<script src="./js/FileSaver/FileSaver.min.js"></script>
    <!-- jszip.js：打包下载，见：https://www.oschina.net/p/jszip -->
	<script src="./js/jszip/jszip.js"></script>
	<style>
	</style>
	<script>
		var zip;
		var zipName;
		var fileFolder;
		var fileList;
		var fileCount;
			
		function fileDownload(tagId){
			var url = $("#"+tagId).attr("src");
			var name = $("#"+tagId).attr("name");
			saveFile(url, name);
			//savePicture(url, name);//绘制图像
		}
		
		//保存文件，包括图片、文档、视频等
		function saveFile(url, name){
			var xhr = new XMLHttpRequest();
			xhr.open('get', url, true);
			xhr.responseType = 'blob';//二进制对象，binary
			xhr.onload = function () {
				var blob = xhr.response;//response 属性返回响应的正文，取决于 responseType 属性。
				saveAs(blob, name);//FileSaver.js提供的方法
			};
			xhr.send(null);
		}
		
		//绘制图像，不是源文件，图像大小会增大
		function savePicture(url, name){
			var image = new Image();
			image.setAttribute('crossOrigin', 'Anonymous'); // 设置 crossOrigin 属性，解决图片跨域报错
			image.src = url;
			image.onload = function(){
				var canvas = document.createElement('canvas');
				canvas.width = image.width;
				canvas.height = image.height;
				var ctx = canvas.getContext('2d');
				ctx.drawImage(image, 0, 0, image.width, image.height);//绘制图像，得到的图像并不是源url，而是重新绘制的
				var url = canvas.toDataURL('image/jpg', 1);
				var a = document.createElement("a"); // 生成一个a元素
				var event = new MouseEvent("click"); // 创建一个单击事件
				a.download = name; // 设置图片名称
				a.href = url; // 将生成的URL设置为a.href属性
				a.dispatchEvent(event); // 触发a的单击事件
			};
		}
		
		//打包下载：文件列表
		function fileDownloadZip(){
			zip = new JSZip();
			zipName = "test";
			fileFolder = zip.folder(zipName);
			fileList = [];
			fileCount = $("img").length;
			for(var i=0; i<fileCount; i++){
				var url = $("img").eq(i).attr("src");
				var name = $("img").eq(i).attr("name");
				saveFileZip(url, name);
			}
		}
		
		//打包下载：向压缩包添加文件
		function saveFileZip(url, name){
			var xhr = new XMLHttpRequest();
			xhr.open('get', url, true);
			xhr.responseType = 'blob';//二进制对象，binary
			xhr.onload = function () {
				var blob = xhr.response;//response 属性返回响应的正文，取决于 responseType 属性。
				fileList.push({name: name, content: blob});
				if (fileList.length === fileCount) {
					if (fileList.length) {
						for (var k = 0; k < fileList.length; k++) {
							// 往文件夹中，添加个文件的数据
							fileFolder.file(fileList[k].name, fileList[k].content, {
								binary: true //二进制
							})
						}
						zip.generateAsync({type: 'blob'}).then(function(content){
							saveAs(content, zipName+'.zip');
						})
					}
				}
			};
			xhr.send(null);
		}
	</script>
</head>
<body style="padding:20px;">
	<img id="img001" width="200" name="img001.jpg" src="https://img-blog.csdnimg.cn/a3f73553ad8f4bdeb3d83b4181d1810b.png">
	<div onclick="fileDownload('img001');" style="cursor:pointer">下载</div></br>
	</br>
	<img id="img002" width="200" name="img002.jpg" src="https://img-blog.csdnimg.cn/8f3084944c054ef3ae1658c4c202d208.png">
	<div onclick="fileDownload('img002');" style="cursor:pointer">下载</div></br>
	</br>
	<div onclick="fileDownloadZip();" style="cursor:pointer">打包下载</div></br>
</body>
</html>

源码包：https://download.csdn.net/download/qq_33427869/86773549