从服务器下载文件时显示进度条

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();