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

Question

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

由于我没有使用任何服务器端编码，我使用mailto:example@email.com 形式的post 部分来获取详细信息。

填表后如何使用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 位于已知 url，您可以自动单击链接以查看或下载它：

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');