Bootstrap 从 java servlet 下载文件时可以看到进度条

Question

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

应用程序架构设计为 - 从使用 SuperAgent 的 React JS 调用 Servlet API，它负责编写 Excel 文件，它将 return 那个 Excel 文件到 SuperAgent 下载相同的。

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

请在下面找到我的代码

Servlet API 编写 Excel 文件的代码和 return 与 SuperAgent 相同

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

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

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

  });
}

我想在下载文件时显示下面bootstrap的进度条。

<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

你写headers和数据的代码如下..

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

请注意，内容长度是在写入输出流之后设置的。 HTTP 响应由一系列 headers 组成，后跟您通过 OutputStream 写入的内容。在这里，您只需在流式传输内容后设置内容长度。所以这个值不会在响应开始时发送。

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

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

Bootstrap 从 java servlet 下载文件时可以看到进度条

Bootstrap progress bar visible when downloading file from java servlet

java

servlets

twitter-bootstrap

superagent

reactjs