使用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