從服務器下載文件時顯示進度條

Question

我需要向請求下載文件的用戶顯示進度條。 我正在使用J2EE應用程序生成該文件。 用戶將提交表單數據以獲取文件。 服務器將所有提交的數據進行操作，生成PDF文件並將其發送回客戶端。

所以我想向用戶顯示進度條，直到文件到達客戶端。 有沒有辦法做到這一點？

Answer 1

如果我理解你，你想要顯示一個進度條，直到你的服務器准備發送文件，而不是顯示下載文件的進度。

如果這是真的，那么你正在處理一個艱難的運動。 可靠的進度條需要知道（非常精確）您正在做什么以及需要多長時間。 在您的情況下，有許多不可靠的因素（其中一個，也許是最大的因素是網絡本身）。

因此，大多數開發人員使用某種“無盡”動畫來顯示“正在進行中的工作”。

更新

根據您的評論，顯示“正在進行中的工作”動畫的最簡單方法是

$.ajax({
    url:      "/myscripts/myserverscript",
    type:     "POST",
    data:     {
       foo: "bar"
    },
    dataType: "text",
    beforeSend: function(xhr){
        // display a progress animation
    },
    complete: function(xhr, status){
        // hide the animation
    }
    ...
});

在單個請求的情況下。 您還可以為（ .ajaxStart()和.ajaxStop() ）設置全局ajax事件處理程序以設置show / hide功能。

參考： .ajax（） ,. ajaxStart（） ,. ajaxStop（）

Answer 2

服務器端文件生成的進度條：

我們假設服務器需要很多秒才能生成文件。 此事件由原始請求（阻塞操作）觸發。 完成后，文件將被生成，並將被發送回客戶端。

同時，您希望通過其他請求（ajax）調用服務器並獲取當前為特定用戶生成的文件的百分比。

這里的膠水部分是：

• 當原始請求生成文件時，它需要以頻繁的間隔（即每10％）存儲進度。 在http會話中存儲此數據將正常工作。
• 其他請求（ajax）只需要能夠從http會話中提取此信息
• 在http會話上同步（序列化訪問），某些Web應用程序通常會做的事情是不可能的，因為其他請求（ajax）只會阻塞，直到原始請求完成
• 在客戶端，它是所有html + javascript提供您需要的交互（動畫進度條）。 即使間隔非常粗糙（從10％跳到20％到30％），您也可以使用jQuery為條形圖設置動畫。 我過去做過一次，看起來很棒。

文件下載進度條：

最好把它留給瀏覽器的原生對話框。

Answer 3

在Java中，您只需在輸入流周圍包裝一個javax.swing.ProgressMonitorInputStream，但請注意，除非服務器以分塊流模式發送，否則顯示實際上並不意味着什么，因為整個響應將在之前被讀入內存。第一個字節傳遞給Java。

Answer 4

使用XMLHttpRequest，您可以下載文件並顯示進度。

showProgressBar(); 
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Big_%26_Small_Pumkins.JPG', true);
xhr.responseType = "blob";
xhr.onprogress = function (e) {
    console.log(e.loaded / e.total * 100);//shows downloaded percentage
    setProgressBarPercentage(e.loaded / e.total * 100);
}
xhr.onload = function () {
    hideProgressBar();
    var urlCreator = window.URL || window.webkitURL;
    var url = urlCreator.createObjectURL(this.response);
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'FILENAME');
    link.click();
}
xhr.send();