javascript - 填写表单后如何使用 JS、JQuery 下载或查看 PDF？

Question

我正在创建一个页面，用户可以在其中查看 PDF 文件，例如小册子。我希望他们先填写一份表格，将信息发送到电子邮件，然后页面重定向以打开 PDF。

由于我没有使用任何服务器端编码，因此我在表单 post 部分中使用 mailto:example@email.com 来获取详细信息。

填写表单后如何使用JS、JQuery下载或查看PDF？

更新:我正在尝试并意识到使用mailto:发布表单详细信息会打开计算机的电子邮件客户端，您必须通过该客户端手动单击“发送”。这意味着无需实际接收下载者的详细信息即可查看 PDF。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#myModal2">
  Get Brochure
</button>

<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel2">View Sample Brochure</h4>
      </div>
      <div class="modal-body">
        <p>Please fill out the form below first</p>
        <form method="post" action="" enctype="text/plain">
          <div class="form-group">
            <input type="text" class="form-control" id="firstName" Name="First Name" placeholder="First Name" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="lastName" Name="Last Name" placeholder="Last Name" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="Company" Name="Company" placeholder="Company" required>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" id="usermail" Name="MailId" placeholder="E-mail Address" required>
          </div>
          <button type="submit" class="btn btn-default btn-lg btn-block">Submit</button>
        </form>
      </div>

    </div>
    <!-- modal-content -->
  </div>
  <!-- modal-dialog -->
</div>
<!-- modal -->

Answer 1

如果 PDF 位于已知网址，您可以自动点击链接来查看或下载它:

function download (href) {
  const anchor = document.createElement('a');
  anchor.href = href;
  anchor.download = true;
  document.body.appendChild(anchor);
  anchor.click();
}

download('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');