web程序实现下载进度的两种方法

前端 JavaScript

方法1

const xhr = new XMLHttpRequest();
				xhr.open('POST', downUrl);
				xhr.send(null);
				// 设置服务端的响应类型
				xhr.responseType = "blob";
				// 总大小
				var totalLength = 0;
				// 监听下载
				xhr.addEventListener('progress', event => {
					// 计算出百分比
					const percent  = ((event.loaded / totalLength) * 100).toFixed(2);
					console.log("下载进度："+percent);
					element.progress('D_'+fileid, percent+'%');
					if(percent>=100){
						$("[lay-filter='D_"+fileid+"']").remove();
						layer.alert("下载完成！");
					}
				}, false);

				xhr.onreadystatechange = event => {
					if(totalLength == 0){
						const ContentLength = xhr.getResponseHeader('Content-Length');
						console.log("下载文件大小："+ContentLength);
						totalLength = ContentLength;
					}

					if(xhr.readyState == 4){
						if (xhr.status == 200){
							// 获取ContentType
							const contentType = xhr.getResponseHeader('Content-Type');

							// 文件名称
							const filename = xhr.getResponseHeader('Content-Disposition').split(';')[1].split('=')[1];
							if (typeof window.chrome !== 'undefined') {
								// Chrome version
								var link = document.createElement('a');
								link.href = window.URL.createObjectURL(xhr.response);
								link.download = filename;
								link.click();
							} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
								// IE version
								var blob = new Blob([xhr.response], { type: 'application/force-download' });
								window.navigator.msSaveBlob(blob, filename);
							} else {
								// Firefox version
								var file = new File([xhr.response], filename, { type: 'application/force-download' });
								window.open(URL.createObjectURL(file));
							}
						} else if (response.status == 404){
							alert('文件： 不存在');
						} else if (response.status == 500){
							alert('系统异常');
						}
					}
				}

方式2，基于websocket实现，需要后端配合

var html='<div class="layui-progress" lay-showpercent="true"  style="position: fixed;top: 10px;right: 20px;width: 300px;" lay-showpercent="true" lay-filter="D_'+fileid+'">';
				html+='<div class="layui-progress-bar" lay-percent="0%"></div>';
				html+='</div>';
				$("body").append(html);

			var websocket = null;
			if("WebSocket" in window){
				var host = window.location.host;
				var url = encodeURI('ws://'+host+'/oa/websocket/'+ fileid);
				websocket = new WebSocket(url);
			}else{
				alert("浏览器不支持websocket");
			}
			websocket.onopen = function(event){
			}
			websocket.onclose = function(event){
			}
			websocket.onmessage = function(event){
				var msg = JSON.parse(event.data);
				console.log(msg.msg);
				element.progress('D_'+msg.msg.id, msg.msg.content+'%');
				if(msg.msg.content==100){
					$("[lay-filter='D_"+msg.msg.id+"']").remove();
					layer.alert("下载完成！");
				}
			}
			websocket.onerror = function(event){
			}
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		    window.onbeforeunload = function(){
		    	closeWebsocket();
		    }
			//关闭websocket
			function closeWebsocket(){
				//3代表已经关闭
				if(3!=websocket.readyState){
					websocket.close();
				}else{
					alert("websocket之前已经关闭");
				}
			}*/
			//download_file.iframe.src = "cgformAttchController.do?downloadFile&fileid="+fileid;

本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2022-08-09 22:35:45