Отображение загружаемого изображения при создании PDF с использованием mPDF - PullRequest
Новая
       9

Отображение загружаемого изображения при создании PDF с использованием mPDF

0 голосов
/ 06 сентября 2018

У меня есть форма для представления названия экзамена и диапазона оценок для создания PDF-файла с именем студента, оценкой и рангом. Значения формы для отправки в другой скрипт, который используется для генерации PDF с использованием mPDF. Поскольку существует много записей, для генерации PDF требуется некоторое время.

Форма вызова скрипта следующая: 

<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
       <input type="text" name="examid" required />
       <input type="text" name="markmin" requried />
       <input type="text" name="markmax" required />
       <input type="submit" name="submit" value="Submit" />
</form>

Я хочу знать, смогу ли я отобразить загрузочное изображение во время работы скрипта, вызванного из POST.

1 Ответ

0 голосов
/ 06 сентября 2018

Существует два варианта: заменить кнопку отправки на общий счетчик (например, шрифт awsome) или на полную страницу модальный с помощью счетчика. Для обеих этих опций потребуются прослушиватели JavaScript при отправке формы.

Заменить кнопку "Отправить" 

(function($) {
  $('form').on('submit', function(e) {
    e.preventDefault(); //remove this line. Only included for demo purposes.
    $(this).find('[name="submit"]').replaceWith('<i class="fa fa-spinner fa-spin"></i>');
  });
})(jQuery)
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
  <input type="text" name="examid" required />
  <input type="text" name="markmin" requried />
  <input type="text" name="markmax" required />
  <input type="submit" name="submit" value="Submit" />
</form>

Модальное всплывающее окно 

(function($) {
  $('form').on('submit', function(e) {
    e.preventDefault(); //remove this line. Only included for demo purposes.
  });
})(jQuery)
.modal.show .modal-dialog.modal-dialog {
  width: 25vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.modal .modal-content {
  width: 25vw;
  font-size: 25vw;
  background: transparent;
  border: none;
  color: red;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal form-validation" role="form" method="POST" action="generatePDF.php">
  <input type="text" name="examid" required />
  <input type="text" name="markmin" requried />
  <input type="text" name="markmax" required />
  <input type="submit" name="submit" value="Submit" data-toggle="modal" data-target="#exampleModal" />
</form>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <i class="fa fa-spinner fa-spin"></i>
      </div>
    </div>
  </div>
</div>

В обоих этих случаях удалите строку e.preventDefault(), так как это остановит фактическую отправку формы.

Прелесть модальной опции в том, что вы можете заменить спиннер (снова шрифт) на любое изображение, которое вы хотите.

...