关于前端form提交后端返回文件流触发浏览器下载(并发控制)

前文介绍过这种文件下载方式,它有好处也有不足的地方。好处是可以充分利用浏览器自身的资源调度优势,开发只管提交不用关注下载细节,用户可以在浏览器下载任务中看到下载的状态。不足之处是只能下载到浏览器配置的默认下载位置,而且JS里不能掌握下载状态。

更为关键的是如果一次下载的文件较多的话,提交了N个请求,这样浏览器会创建N个标签页,虽然浏览器自己会调度,下载完后自行关闭这些标签页,但是会带来密集恐惧,那有没有办法控制下浏览器下载的任务数(虽然处于下载中的最多6个任务,但是等待的任务也是任务啊)

既然文件下载提交后,无法从浏览器得到任务下载状态,那么从服务器呢,这个方案是可行的。

前端任务提交后,后端服务器读取本地文件流通过pipeline对接到response,response设置头参数,pipeline完成后回调sse消息发送到前端通知文件下载完成。

javascript 复制代码
app.get('/events', (req,res)=>{
	res.writeHead(200,  { 'Content-Type': 'text/event-stream', 'Connection': 'keep-alive', 'Cache-Control': 'no-cache' });
	res.write(`data: ${JSON.stringify({"msg":"消息服务正常"})}\n\n`);
	let clientid=stringRandom(32, { letters: 'ABCDEF' });
	clients.push({ "clientid":clientid, "uid":req.session.user.userid, "res":res });
	req.on('close', () => { clients = clients.filter(item => (item.clientid != clientid)); });
});

function sendssemsg(jvar)
	clients.forEach(client=>{ if (client.uid==jvar.uid) { client.res.write(`data: ${JSON.stringify(jvar.msg)}\n\n`) } });
}

...
app.post("/getfile",express.urlencoded({ extended: false }),(req,res)=>{
...
	res.set({ "Content-Type": "application/octet-stream",  "Content-Disposition": "attachment;filename* = UTF-8''"+fixedEncodeURIComponent(filename.substr(filename.lastIndexOf("/")+1)),"Content-Length": stats.size });
	pipeline(fs.createReadStream(filepath), res, (err) => { 
		if (err) console.log("下载出错") 
		else sendssemsg({"uid":userid,"msg":filename+" 下载完成"})
		});
	...

通过sse发送下载结果,效率最好

前端收到相应的sse消息,就可以处理下载任务队列操作了

javascript 复制代码
	function downloadfile(filename) {
		let form=$("#formp");
		$("input[name=filename]").attr("value",filename);
		form.submit();
		}
	
	var indownloading=0;
	const evtSource = new EventSource("/events");

	evtSource.addEventListener('message', function(event) {
		//let jvar=JSON.parse(event.data);
		indownloading-=1;
		if (waitinglist.length>0) {
			indownloading+=1;
			downloadfile(waitinglist.shift());
			}
		})

	let indownloading=0;
	let taskLimit=navigator.hardwareConcurrency;
	while ((indownloading<tasklimit)&&(waitinglist.length>0)) {
		indownloading+=1;
		downloadfile(waitinglist.shift());
		}
html 复制代码
<form name="formp" id="formp" action="/getfile" method="post" target="_blank" rel="noopener noreferrer">
<input name="filename" value="">
</form>

这样效果就是下载任务控制在CPU核数,浏览器上看到的下载标签也不会太多,视觉观感上对用户更友好一些。

相关推荐
Chrikk19 分钟前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*22 分钟前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue22 分钟前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man25 分钟前
【go从零单排】go语言中的指针
开发语言·后端·golang
cs_dn_Jie25 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer