интегрировать индикатор выполнения Bootstrap в reactjs - вызов API-вызова Java-сервлета из суперагента

У меня есть требование, что я должен создать отчет Excel и загрузить его из приложения JS. Я хочу интегрировать индикатор выполнения Bootstrap во время этого процесса.

Как я могу интегрировать индикатор выполнения здесь.?

Пожалуйста, найдите мой код ниже.

Штрих-код BootStrap Progress:

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

Код ReactJS (SuperAgent) для создания листа Excel и его загрузки.

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

        });
}

Код ReactJS Botton для вызова метода handleInvoice():

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

Пожалуйста, найдите мой код сервлета, где я получаю размер файла и также устанавливаю его в заголовок ответа.


reactjs java servlets progress-bar superagent
person Karthikeyan    schedule 05.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В пакете superagent есть функция отслеживания прогресса.

SuperAgent запускает progress событий при загрузке и загрузке больших файлов.

Вы можете использовать эту функцию, чтобы получить текущий процент запросов на получение и применить этот процент к индикатору выполнения.

Пример

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>
person bennygenel    schedule 05.11.2017
comment
event.percent приходит неопределенным. -- Не уверен, почему он приходит как undefined. - person Karthikeyan; 05.11.2017
comment
В документации сказано, что может отсутствовать, если размер файла неизвестен для процента. Это может быть связано с тем, что сервер не предоставляет достаточно информации о файле. вам может потребоваться добавить некоторые заголовки в ваш ответ API, чтобы сообщить суперагенту размер запроса. - person bennygenel; 05.11.2017
comment
Пожалуйста, найдите мой код сервлета, где я получаю размер файла, а также устанавливаю в заголовке также длину содержимого. - person Karthikeyan; 05.11.2017
comment
Пожалуйста, добавьте информацию о коде вашего сервера в вопрос, а не в ответ. - person bennygenel; 05.11.2017
comment
у тебя апи с джавой? - person bennygenel; 05.11.2017
comment
Я ничего не знаю о Java. Обновите свой вопрос и добавьте тег, связанный с Java, чтобы, возможно, кто-то мог ответить лучше. - person bennygenel; 05.11.2017
comment
event.percent не приходит как ответ от суперагента. Я попытался распечатать событие. оповещение (JSON.stringify (событие)); Ответ: {isTrusted:true,direction:download} - person Karthikeyan; 05.11.2017
comment
Как я уже говорил, в документации говорится, что он может отсутствовать из-за неизвестного размера файла. - person bennygenel; 05.11.2017
comment
Я получаю этот event.percent сейчас. Спасибо - person Karthikeyan; 06.11.2017
comment
Я рад, что ты разобрался. Не могли бы вы добавить его к своему вопросу в качестве обновления и показать, как вы его решаете. Это может быть полезно для других позже. - person bennygenel; 06.11.2017
comment
Я только что получил этот event.percent. У меня возникают проблемы при интеграции с индикатором выполнения Bootstrap. Этот компонент не отображается должным образом. Я тоже решил опубликовать эту проблему... - person Karthikeyan; 06.11.2017