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