从Java Servlet下载文件时可见的Bootstrap进度栏

Question

从Sevlet API下载文件时，我想显示BootStrap的进度栏。

应用程序架构的设计如下-从使用SuperAgent的React JS调用Servlet API，该API负责编写Excel文件，并将该Excel文件返回给SuperAgent进行下载。

在执行此过程时，我要显示UX的BootStrap进度条。

请在下面找到我的代码

用于编写Excel文件并将其返回给SuperAgent的Servlet API代码

try {
    String reportname = "Invoice";  
    resp.setContentType("application/vnd.ms-excel");
    resp.setHeader("Content-Disposition", "attachment; filename=" + 
    reportname + ".xls");
    HSSFWorkbook workbook1=service.getCommercialInvoiceService(id);
    ByteArrayOutputStream outByteStream = new ByteArrayOutputStream();
    workbook1.write(outByteStream);
        byte [] outArray = outByteStream.toByteArray();
        int fileSize=outArray.length;
        outStream = resp.getOutputStream();
        outStream.write(outArray);
        outStream.flush();
        outStream.close();
        resp.setHeader("Content-Length", ""+fileSize);

} catch (IOException ioe) {
    throw new ServletException(ioe);
}

使用SuperAgent从Servlet API下载文件的ReactJS方法

handleInvoice(e) {
  e.preventDefault()
  var item = this.state.item;
  var lines = item.order;
  var request = require('superagent');
  var apiBaseUrl = "api/Invoice";
  var req = request.get(apiBaseUrl);
  req.query({ item : item.id})
  req.end(function(err,res) {
     if(err) {
         alert(" error"+err);
         confirmAlert({
                message: 'Invoice is not prepared properly.....', 
                confirmLabel: 'Ok', 
            });
     }
     else {
         window.location= 'api/Invoice?item=' + item.id,'';
         element.click();
     } 

  });
}

我要在下载文件时显示以下引导程序的进度栏。

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="" aria-
   valuemin="0" aria-valuemax="100" style="width: 60%;">
   </div>
</div>

我如何在ReactJS代码中集成进度条（SuperAgent正在调用Java Servlet API）。

Answer 1

编写标头和数据的代码如下。

int fileSize=outArray.length;
outStream = resp.getOutputStream();
outStream.write(outArray);
outStream.flush();
outStream.close();
resp.setHeader("Content-Length", ""+fileSize);

注意，内容长度是在写入输出流之后设置的。 HTTP响应由一系列标题组成，这些标题跟在内容之后，您可以通过OutputStream对其进行写入。 在这里，您只需在流传输内容后设置内容长度。 因此，此值不会在响应开始时发送。

输出的内容长度不是强制性的（流传输它的进程可能不知道）。 但是，当然，除非您知道数据的长度，否则您将无法生成进度条。 只需在写入数据之前设置内容长度，即可将其放入响应头中。

int fileSize=outArray.length;
resp.setHeader("Content-Length", ""+fileSize);
outStream = resp.getOutputStream();
outStream.write(outArray);
outStream.flush();
outStream.close();