在 reactjs 中集成 Bootstrap 的进度条 - 从 superagent 调用 java servlet API

Question

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

如何在此处集成进度条？

请在下面找到我的代码。

BootStrap进度条码：

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

用于生成 Excel sheet 的 ReactJS (SuperAgent) 代码并下载相同的代码。

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

        });
}

调用 handleInvoice() 方法的 ReactJS Botton 代码：

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

请找到我的 servlet 代码：

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

请找到我的 servlet 代码。我正在获取文件的大小并将其设置为响应 header。

Answer 1

superagent 包具有 progress tracking 功能。

SuperAgent fires progress events on upload and download of large files.

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

例子

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>

在 reactjs 中集成 Bootstrap 的进度条 - 从 superagent 调用 java servlet API

integrate Bootstrap's progress bar in reactjs - invoking java servlet API call from superagent

java

servlets

superagent

progress-bar

reactjs