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

要创建同时提交表单和下载 pdf 的按钮，您需要在前端和后端上做出相应的更改。以下是一种可行的方法：

前端部分

1. HTML

在HTML中，您需要创建一个包含表单控件和一个“提交和下载”按钮的表单。例如：

<form id="form1" action="submit_and_download.php" method="post" target="_blank">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit" id="submit-btn">Submit &amp; Download PDF</button>
</form>

注意，我们将表单的action设置为submit_and_download.php，如果您使用其他后端语言，则应更改为正确的文件路径和名称。我们还将表单的target设置为_blank，这将在新标签页中打开PDF文档，而不是在当前页面中替换表单。

2. JavaScript

当用户单击提交按钮时，我们需要执行以下操作：

• 阻止表单的默认提交行为。
• 构建一个包含表单数据的POST请求，并附加一个额外的参数，指示后端在提交表单后生成PDF文档。
• 将该POST请求发送到后端，并打开返回的PDF文档。

代码如下：

document.querySelector('#submit-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  
  // 获取表单数据
  var form = document.querySelector('#form1');
  var formData = new FormData(form);
  
  // 添加一个额外的参数
  formData.append('generate_pdf', true);
  
  // 发送POST请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action);
  xhr.responseType = 'blob'; // 返回的数据类型是blob
  xhr.onload = function() {
    // 在新标签页中打开PDF文档
    var url = window.URL.createObjectURL(xhr.response);
    var a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    a.download = 'form.pdf';
    a.click();
    window.URL.revokeObjectURL(url); // 释放URL对象的内存
  };
  xhr.send(formData);
});

在该JavaScript代码中，我们将单击事件侦听器添加到submit-btn按钮。当该按钮单击时，该侦听器执行以下操作：

• 阻止默认提交行为。
• 使用FormData对象获取表单数据。
• 添加一个名为generate_pdf的布尔值参数，告诉后端在提交表单后生成PDF。
• 创建一个XMLHttpRequest对象，并将其open为POST请求。
• 将responseType设置为blob，这表示我们想要收到一份二进制数据而不是字符串数据（例如JSON）。
• 在onload事件中打开PDF文档并释放URL对象的内存。

后端部分

1. PHP

在submit_and_download.php文件中，我们需要处理表单数据并生成PDF文档。您可以使用一些PDF库（例如TCPDF或FPDF）来生成PDF。

下面是一个简单的PHP示例，它将表单数据写入PDF文档并将其返回给前端：

// 检查是否按下提交并下载按钮
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["generate_pdf"])) {
  // 获取表单数据
  $name = $_POST["name"];
  $email = $_POST["email"];
  
  // 生成PDF
  require('fpdf.php');
  $pdf = new FPDF();
  $pdf->AddPage();
  $pdf->SetFont('Arial','B',16);
  $pdf->Cell(40,10,"Name: $name");
  $pdf->Ln();
  $pdf->Cell(40,10,"Email: $email");
  
  // 输出PDF到浏览器
  $pdf->Output("form.pdf", "I");
  exit; // 结束脚本
}

该PHP代码首先检查是否按下了“生成PDF”按钮，并获取表单数据。然后，它将使用FPDF库生成PDF文档，并将其输出到浏览器。

注意，我们在将PDF文档输出到浏览器之前使用exit命令结束脚本。这是必需的，因为没有其他输出会保留在数据流中。

总结

通过结合HTML、JavaScript和PHP，我们可以轻松地创建一个同时提交表单和下载PDF文档的按钮。在此过程中，我们使用了FormData对象来获取表单数据，并使用XMLHttpRequest对象将数据发送到后端。在后端，我们使用一些PDF库来生成PDF文档，并将其输出到浏览器。