我如何才能使第三方脚本在我的网站上正常运行？

Question

当用户填写我的表格并单击“ Generate CV”按钮时。 HTML表单应自动以PDF格式下载到用户下载文件夹。

问题一：

我尝试使用this第三方插件，但是无法正常运行，因为当我单击<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>按钮时，没有任何反应。我该如何使用它？

Inspect errors

问题二：

如何获得该按钮<a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>，使其看起来像我确实使用过同一类的<input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">一样。但是，我认为引导程序中的类信息仅适用于<input>标记，因此如何解决此问题？

下面是我当前的代码

     <!-- Form-->
     <section class="module bg-gray text-center divider-bottom p-3">
        <div class="container">
           <div class="row">
              <div class="col-md-12">
                 <form id="contact-form" method="post" novalidate>
                    <div class="row">
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <p></p>
                          <div class="text-center">
                             <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                             <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>
                          </div>
                       </div>
                    </div>
                 </form>
                 <!-- Ajax response-->
                 <div class="ajax-response text-center" id="contact-response"></div>
              </div>
           </div>
        </div>
     </section>
     <!-- Form end-->

这是我放置第三方脚本的位置。

      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
</html>
</body>

需要以下完整的网页代码

 <!-- Form-->
         <section class="module bg-gray text-center divider-bottom p-3">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <form id="contact-form" method="post" novalidate>
                        <div class="row">
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <p></p>
                              <div class="text-center">
                                 <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                                 <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">PDF this page!</a>
                              </div>
                           </div>
                        </div>
                     </form>
                     <!-- Ajax response-->
                     <div class="ajax-response text-center" id="contact-response"></div>
                  </div>
               </div>
            </div>
         </section>
         <!-- Form end-->

      <!-- Copyright -->
      <div class="footer-copyright text-center text-black py-3">© Copyright 2018 Handcrafted By Zeplur. All Rights Reserved |
         <a href="terms.pdf">Terms and conditions</a>
      </div>
      <!-- To top button--><a class="scroll-top" href="#top"><i class="fas fa-angle-up"></i></a>
      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
   </body>
</html>

Answer 1

看起来您的代码很好。但是正如您在检查视图中所看到的那样，错误清楚地表明无法加载本地资源。

问题1-pdfmyform()不允许读取本地资源。

将代码托管在适当的网站或本地Web（http）服务器上后，它应该可以正常工作。