Question

JavaScript，HTML。我非常感谢任何尝试获取查询中所有输入数据并将其显示为pdf的建议，这些信息将通过按钮和jsPDF下载，但是下面的代码无法正常工作

我的查询文本字段为name，company等。我非常感谢您提出任何建议。

<html>
<head>
  <script src="jquery-2.1.4.js"></script>
  <script src="jspdf.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="navbar"><span>jsPDF Tutorial - Form Filling</span></div>
  <div id="wrapper">
        <input type="button" id="button" value="Submit"/>

  <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>
</body>

</html>

Answer 1

您需要正确包装元素（<script>中的#wrapper标签）

已更新：CodePen。

HTML

<body>
  <div id="navbar"><span>jsPDF Tutorial - Form Filling</span></div>
  <div>

    <input type="text" id="name"/>
    <input type="text" id="company"/>
    <input type="text" id="department"/>
    <input type="text" id="title"/>
  </div>

  <input type="button" id="button" value="Submit"/>

  //script here
  <script> 
         ...
  </script>
</body>

脚本

$('#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(11);
    doc.setTextColor(92, 76, 76);

    doc.text(15, 20, "Name:");
    doc.text(40, 20, name);
    doc.text(15, 24, "Company:");
    doc.text(40, 24, company);
    doc.text(15, 28, "Department:");
    doc.text(40, 28, department);
    doc.text(15, 32, "Title:");
    doc.text(40, 32, title);
    doc.save('test.pdf');

});

Answer 2

之前它可以正常工作，但是我不知道发生了什么事情，现在它不再工作了，请谢谢

<html>
    <head>
      <script src="jquery-2.1.4.js"></script>
      <script src="jspdf.min.js"></script>
      <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <div id="navbar"><span>jsPDF Tutorial - Form Filling</span></div>
      <div id="wrapper">
            <input type="button" id="button" value="Submit"/>

      </div> // should be here

      <script>

        $('#button').click(function() {

            var doc = new jsPDF();
      var chars1 = $('#staffname_1_1').val();

            doc.setFontSize(26);
            doc.setTextColor(92, 76, 76);

            doc.text(23, 81, chars1);

            doc.save('test.pdf');

        });
       </script>

    </body>

    </html>

jsPDF无法与我的jQuery文本字段一起使用

2 个答案: