使用jquery给网站添加下载进度显示

Posted webbery

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery给网站添加下载进度显示相关的知识,希望对你有一定的参考价值。

因为知微网站的流出带宽特别低,为了给用户更好的体验,在线打开pdf的时候,考虑采用两条途径:一条是按页提供给用户进行阅读,减少带宽占用,因为不是所有的用户都全部页面都看一遍;另一条是给出pdf的下载进度提示,用户能够有交互式的感知体验。第一条限于技术原因,实现起来较为复杂;因此先实现了第二条途径。

从网站的技术角度来看,前端页面对服务器发出ajax请求,服务器收到请求后读取对应pdf,通过Nodejs的Stream方式回传给页面。下面的代码显示了通过jquery发送ajax请求,并在控制台显示进度信息

 1 $.ajax({
 2             url: ‘/api/version‘,
 3             type: ‘post‘,
 4             dataType: ‘json‘,
 5             data: { paperid: paperid, version: filename },
 6             statusCode: {
 7                 200: function (json) {},
 8             },
 9             xhr: function(){
10                 var xhr = new window.XMLHttpRequest();
11                 //download progress
12                 xhr.addEventListener("progress", function (evt) {
13                     if (evt.lengthComputable) {
14                         var percentComplete = evt.loaded / evt.total;
15                         console.info("progress: "+Math.round(percentComplete * 100)+"%");
16                     }
17                 }, false);
18                 return xhr;
19             }
20         });

如果evt.lengthComputable为false,一般是由于服务器没有设置数据包的长度导致的。因此,在服务器端回传的代码片段如下:

 1         const s = new Readable();
 2         s.push(blob);
 3         s.push(null);
 4         res.set({
 5             ‘Accept-Ranges‘:‘bytes‘,
 6             ‘Content-Type‘: ‘application/octet-stream‘,
 7             ‘Content-Disposition‘: ‘attachment; filename=‘ + paperid + ‘.pdf‘,
 8             ‘Content-Length‘: blob.length
 9         });
10         s.pipe(res);
Content-Length即是下载文件的总长度

参考资料:

http://api.jquery.com/jQuery.ajax/

https://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr

以上是关于使用jquery给网站添加下载进度显示的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Reactjs 中添加丰富的代码片段?

显示下载进度条

如何在家庭活动android上显示进度对话框?

jquery 圆形进度条

网站顶部显示预加载进度条preload.js

个人网站html5雪花飘落代码JS特效下载