从 java servlet 下载文件时，引导进度条可见答案

【问题标题】：Bootstrap progress bar visible when downloading file from java servlet从 java servlet 下载文件时，引导进度条可见
【发布时间】：2017-11-06 03:33:40
【问题描述】：

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

应用程序架构设计如下 - 从使用 SuperAgent 的 React JS 调用负责编写 Excel 文件的 Servlet API，并将该 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();
     } 

  });
}

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

<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）。

【问题讨论】：

在写入数据之前尝试设置内容长度标头（否则标头不会被写入）。我对进度条一无所知，但需要正确的内容长度标题才能知道进度。
是的，它对我有用。谢谢。
酷。 iv 把它写成答案

标签： java twitter-bootstrap reactjs servlets superagent

【解决方案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();

【讨论】：