Question

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

应用程序架构设计如下 - 来自React JS使用SuperAgent调用Servlet API，负责编写Excel文件，它会将该Excel文件返回给SuperAgent下载相同的文件。

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

请在下面找到我的代码

用于写入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();
     } 

  });
}

我想在下载文件时显示以下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

您编写标题和数据的代码如下..

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

从java servlet下载文件时，Bootstrap进度条可见

1 个答案: