使用mPDF生成PDF时显示加载图像

Question

我有一个表格提交考试名称和标记范围，以生成一个包含学生姓名，标记和等级的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调用。

Answer 1

有两个选项：用通用微调器（例如字体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()行，因为这将阻止表单实际提交。

模态选项的优点是你可以用你想要的任何图像替换微调器（再次使用字体）。