当我点击提交按钮时，jsPDF 脚本不会运行

Question

我正在尝试将从我的表单中收集的信息制作成 PDF，但是我的提交按钮没有使用我收集的变量来创建 PDF，当我点击提交时没有任何反应。

我试过将脚本移入和移出表单标记，但我对 Javascript 一点也不熟悉。

<!DOCTYPE html>
<html>
<body>
<script src="https://gist.githubusercontent.com/AlexErmakov/b16df3e89e935e0ad4f6/raw/ff6ca3439ed6e2f88563a363ea2b51f46ebb3906/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<center>
<div class="header" id="myHeader">
  <img src="Archive.png" alt="Archive" style="width:100%,height:100%;">
      <style type="text/css">
    body { margin:0; padding:0;}
    </style>
</div>
  <button type="button" class="collapsible"><center>PDF Form</center></button>
<div class="content">
<form>
        <input type="text" id="name" value=""/ placeholder="Name"><br>
        <input type="text" id="company" value="" placeholder="Company" /><br>
        <input type="text" id="department" value="" placeholder="Department" /><br>
        <input type="text" id="title" value="" placeholder="Job Title"/><br>
        <input type="button" id="button" value="Submit"/>
</form>
<script>
    $('#button').click(function() {
        
         var doc = new jsPDF();
         
         
         
        var name = $('#name').val();
        var company = $('#company').val();
        var department = $('#department').val();
        var title = $('#title').val();
        
        doc.setFontSize(26);
        doc.setTextColor(92, 76, 76);
        
        doc.text(23, 81, name);
        doc.text(23, 122, company);
        doc.text(23, 162, department);
        doc.text(23, 202, title);
         doc.save('test.pdf');

        
        
    

    });
</script>
</div>
<script>

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
</center>
 
</style>
</center>
</body>
</html>

Answer 1

您在代码开头加载的那两个外部脚本的版本存在问题。

试试这两个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>

当我点击提交按钮时，jsPDF 脚本不会 运行

jsPDF script won't run when I hit submit button

html

css

jquery

jspdf

当我点击提交按钮时，jsPDF 脚本不会运行