Question

嗨，我是jspdf和html的新手。我真的很感谢任何建议。我下面的代码工作正常；但是，单击我的按钮后，它只能工作一次。如果我第二次单击它，它将不再起作用。我需要刷新页面以使其重新工作。该函数仅被调用一次，而不是在每次单击按钮时调用。我希望它每次单击按钮时都能正常工作。我可以多次下载pdf。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>PDF</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
    </head>
    <body>
        <!-- Content Area -->
        <div id="print">
            <p></p>
            <p id="veewom"></p>
            <p></p>
            <p id="veewom1"></p>
            <p></p>
            <p id="veewom2"></p>
            <p></p>
            <p id="veewom3"></p>
            <p></p>
            <p id="veewom4"></p>
        </div>
        <div id="p-btn"></div>
        <button onclick="function" type="button"  id="download">Download</button>
        <!-- Script -->
        <script>

    var doc = new jsPDF();

    var specialElementHandlers = {
        '#p-btn': function (element, renderer) {
            return true;
        }
    };

    $('#download').click(function () {
      var chars = $('#try1').val();
      var chars1 = $('#name').val();

      var source = $('#print').html();
      doc.fromHTML(source, 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
      });

    doc.setDrawColor(0);
    doc.setFillColor(128, 128, 128);
    doc.setFontSize(11);
    doc.setFontType('bold');
    doc.text('Name                              :', 12, 30);
    doc.setFontSize(11);
    doc.setFontType('normal');
    doc.text(chars1, 80, 30);
    doc.save('test.pdf');
    });

    </script>
    </body>
</html>

Answer 1

删除属性从该按钮onclick="function"到ID为download的按钮，在添加jspdf的位置之后立即添加jquery库<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>，

Answer 2

您要通过jquery设置点击监听器的属性$uploadDirectory = "/uploads/";

在函数内部移动初始化文档，点击

使用onclick="function"关键字来安全地使用实例并避免冲突

let

功能仅在按钮单击时调用一次。希望每次单击按钮即可执行该功能

2 个答案: