如何创建同时提交表单和下载 PDF 的按钮？

在网页开发中，有时需要让用户填写表单并同时生成 PDF 文件进行下载。此时需要创建一个按钮，点击该按钮会触发表单提交和 PDF 下载。

以下是创建同时提交表单和下载 PDF 的按钮的实现方法：

实现步骤

1. 在 HTML 文件中创建一个表单，并设置表单的提交地址：

<form action="submit.php" method="post">
  <!-- 表单字段 -->
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <!-- 提交按钮 -->
  <button type="submit" name="submit">
    提交并下载 PDF
  </button>
</form>

2. 在 PHP 文件中获取表单提交数据，生成 PDF 文件，并将 PDF 文件返回给浏览器进行下载：

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  // 获取表单数据
  $name = $_POST['name'];
  $email = $_POST['email'];

  // 生成 PDF 文件
  $pdf = new FPDF();
  $pdf->AddPage();
  $pdf->SetFont('Arial','B',16);
  $pdf->Cell(40,10,'Hello World!');
  $pdf->Output('D', $name . '.pdf');
}
?>

3. 在 HTML 文件中添加 JavaScript 代码，实现表单提交和 PDF 下载的功能：

<script>
  // 获取表单和按钮元素
  var form = document.querySelector('form');
  var btn = document.querySelector('button[type="submit"]');

  // 添加点击事件监听器
  btn.addEventListener('click', function() {
    // 禁用按钮，防止重复提交
    btn.disabled = true;

    // 提交表单
    form.submit();

    // 下载 PDF 文件
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'download.php', true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      // 创建下载链接
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(xhr.response);
      link.download = 'document.pdf';
      link.click();
      // 启用按钮
      btn.disabled = false;
    };
    xhr.send();
  });
</script>

代码片段

<!-- HTML 文件 -->
<form action="submit.php" method="post">
  <!-- 表单字段 -->
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <!-- 提交按钮 -->
  <button type="submit" name="submit">
    提交并下载 PDF
  </button>
</form>

<!-- PHP 文件 -->
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  // 获取表单数据
  $name = $_POST['name'];
  $email = $_POST['email'];

  // 生成 PDF 文件
  $pdf = new FPDF();
  $pdf->AddPage();
  $pdf->SetFont('Arial','B',16);
  $pdf->Cell(40,10,'Hello World!');
  $pdf->Output('D', $name . '.pdf');
}
?>

<!-- JavaScript 代码 -->
<script>
  // 获取表单和按钮元素
  var form = document.querySelector('form');
  var btn = document.querySelector('button[type="submit"]');

  // 添加点击事件监听器
  btn.addEventListener('click', function() {
    // 禁用按钮，防止重复提交
    btn.disabled = true;

    // 提交表单
    form.submit();

    // 下载 PDF 文件
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'download.php', true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      // 创建下载链接
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(xhr.response);
      link.download = 'document.pdf';
      link.click();
      // 启用按钮
      btn.disabled = false;
    };
    xhr.send();
  });
</script>