关键词：
因为知微网站的流出带宽特别低，为了给用户更好的体验，在线打开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
djangohighcharts制作图表--显示cpu使用率(代码片段)
...表Highcharts免费提供给个人学习、个人网站和非商业用途使用。 访问官网：https://www.hcharts.cn/进入下载页面：https://www.hcharts.cn/download下载6.10版本解压Highchart 查看详情
给python添加进度条|给小白的tqdm精炼实例！(代码片段)
tqdm包教包会！给Python添加进度条|给小白的tqdm精炼实例！假设我们有一个循环：foriinrange(100):do_something()#这里做某些事假设do_something()很慢，且运行时间不稳定，当我们运行时，我们并不知道运行到哪里了。我们引入一个进度条... 查看详情
wpf客户端浏览器添加loading加载进度(代码片段)
...:WPF客户端浏览器添加Loading加载进度在windows开发界面时，使用浏览器来请求和显示网页内容，是比较常见的。但是在请求网页内容时，因网速或者前端功能复杂加载较慢，亦或者加载时遇到各种问题，如空白/黑屏/加载不完整/证... 查看详情
pythonftp下载显示现在进度(代码片段)
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情
阿里云服务器给wordpress网站添加ssl证书，并且设置http自动跳转https(代码片段)
...请的也可以。最后会得到两个文件。WordPress网站基本都是使用的Web服务器 查看详情
python蟒蛇下载大型文件显示进度条(代码片段)
给html页面添加css样式和自适应布局控制其显示(代码片段)
视频播放网站在上一篇：使用＜img＞和＜iFrame＞等HTML基础标签制作一个视频播放网站基础之上，用CSS设置样式，使其元素居中显示，大小适中。添加鼠标放置效果，使元素发生动态改变。效果... 查看详情
远程下载文件并设置进度显示(代码片段)
defSchedule(a,b,c):"""进度条显示:parama:已经下载的数据块:paramb:数据块的大小:paramc:远程文件的大小:return:"""per=100.0*a*b/cifper>100:per=100sys.stdout.write(‘\r‘)sys.stdout.write(‘\t\t%.2f%%-已下载的大小:%d-文件大小:%d‘%(per,a 查看详情
[winfrom]下载文件并显示进度条的实现代码(代码片段)
功能实现填写下载地址URL，点击另存为按钮，打开另存为对话框，可以选择保存路径，点击下载按钮进行下载，下载过程显示下载百分比和进度条。窗体：组件labelTextBoxButtonprogressBarsaveFileDialog获取saveFileDialog1文件名和路径Path.Get... 查看详情
unity基础控件scrollview的使用，以及进度条不显示的问题(代码片段)
最近使用ScrollView，并且使用VerticalLayoutGroup布局我在Content中添加多个Button，发现进度条不显示 具体的原因呢是因为Content的高度没有超过ScrollView的高度所以，进度条运行的时候会被隐藏掉，只要Content的高度超过Sc... 查看详情
将值从后面的代码传递给 Jquery 函数
...时间】：2015-01-0618:17:01【问题描述】：我在asp.net表单上使用Jquery进度条控件来显示检查员完成工作的百分比。这是进度条的客户端功能。<script>$(function()$("#progressbar").progressbar(value:37););&l 查看详情
网站顶部显示预加载进度条preload.js
...p;支持性主流浏览器都支持，ie浏览器需要9以上9也支持。使用方法<scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script><scriptsrc="js/preload.js"></script><scriptty 查看详情
给layuiupload带每个文件的进度条，.net后台代码(代码片段)
...varxhrOnProgress=function(fun)xhrOnProgress.onprogress=fun;//绑定监听//使用闭包实现监听绑returnfunction()//通过$.ajaxSettings.xhr() 查看详情
php使用进度条上传文件-php和jquery(代码片段)
如何在wordpress中添加单选按钮到我的网站(代码片段)
我在我的网站上使用WordPress。我想在选择单选按钮时向我的WordPress页面添加单选按钮我想在下面显示一个表格。有谁能够帮我答案你好也许更多细节可以帮助ppl告诉你更好的答案。但是有了这么多的信息我会得到一些东西：这只... 查看详情
使用gitstash命令保存和恢复进度(代码片段)
使用gitstash命令保存和恢复进度gitstash保存当前工作进度，会把暂存区和工作区的改动保存起来。执行完这个命令后，在运行gitstatus命令，就会发现当前是一个干净的工作区，没有任何改动。使用gitstashsave‘message...‘可以添加一... 查看详情
给网站头部添加视频海报(代码片段)
给网站头部添加视频海报1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>视频海报</title>6<style>7*8margin:0;9padding:0;1011#banner12width:100%;13height: 查看详情