集成引导和#x27；reactjs中的进度条-从superagent调用JavaServletAPI

我有一个要求，我必须生成一个Excel报告，并且必须从react js应用程序下载该报告。我确实希望在执行此过程时集成Bootstrap的进度条

如何在这里集成进度条

请在下面找到我的代码

引导进度条形码：

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

ReactJS Botton代码调用handleInvoice（）方法：

请查找我的servlet代码，我从中获取文件大小，并将其设置为响应头。

superagent软件包有一个功能

SuperAgent在上传和下载大型文件时触发

进度

事件 档案

您可以使用此功能获取当前get请求百分比，并将该百分比应用于进度条

示例

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.on('progress', event => {
    // set state for the current progress percentage
    this.setState({ progress: event.percent });
  });

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

---

event.percent未定义。-不知道为什么它是未定义的。在文档中，它说如果文件大小的百分比未知，那么它可能会丢失。这可能是因为服务器没有提供足够的文件信息。您可能需要在api响应中添加一些标题，以便让superagent知道请求的大小。请在获取文件大小的位置查找我的servlet代码，并在标题中以内容长度进行设置。请将有关服务器代码的信息添加到问题而不是答案中。您是否使用Java api？

return ( <button type="submit" className="btn btn-primary"  onClick={ 
         this.handleInvoice } > Invoice </button> );

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);
            System.out.println("File Size"+fileSize);

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

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.on('progress', event => {
    // set state for the current progress percentage
    this.setState({ progress: event.percent });
  });

  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={this.state.progress} aria-
      valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>
</div>