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

2022-09-04 21:32:51

我需要向请求下载文件的用户显示进度条。我正在使用 J2EE 应用程序来生成文件。用户将提交表单数据以获取文件。服务器操作所有提交的数据,生成PDF文件并将其发送回客户端。

因此,我想向用户显示一个进度条,直到文件到达客户端。有没有办法做到这一点?


答案 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
    }
    ...
});

在单个请求的情况下。您还可以为 ( 和 ) 设置一个全局 ajax 事件处理程序,以设置显示/隐藏功能。.ajaxStart().ajaxStop()

References: .ajax().ajaxStart().ajaxStop()


答案 2

服务器端文件生成的进度条:

我们假设服务器需要几秒钟才能生成文件。此事件由原始请求(阻塞操作)触发。完成此操作后,将生成文件,并将其发送回客户端。

同时,您希望通过其他请求(ajax)调用服务器,并为当前为特定用户生成的文件获取百分比。

这里的胶水部分是:

  • 当原始请求生成文件时,它需要以频繁的时间间隔(即每10%)存储进度。在 http 会话中存储此数据将正常工作。
  • 其他请求 (ajax) 只需要能够从 http 会话中提取此信息
  • 在http会话上同步(序列化访问)是一些Web应用程序通常做的事情,这是不可能的,因为其他请求(ajax)只会阻止,直到原始请求完成
  • 在客户端,它都是html + javascript,以提供您需要的交互(动画进度条)。即使间隔非常粗糙(从 10% 跳到 20% 再到 30%),您也可以使用 jQuery 对条形图进行动画处理。我过去做过一次,看起来很棒。

文件下载进度条:

最好将此留给浏览器的本机对话框。