未捕获的 TypeError：TextField 不是构造函数 jspdf答案

【问题标题】：Uncaught TypeError: TextField is not a constructor jspdf未捕获的 TypeError：TextField 不是构造函数 jspdf
【发布时间】：2021-03-28 22:47:39
【问题描述】：

当我尝试在 PDF 中集成输入字段时出现此错误。它在jspdf示例中工作，即http://raw.githack.com/MrRio/jsPDF/master

您必须从选择示例中选择 AcroForms。但是后来我尝试集成它，它不能通过控制台上的错误工作，即 Uncaught TypeError: TextField is not a constructor

下面是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jsPDF - AcroForm</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
    <body>
        <div class="container">
            Test PDF <button onclick="generate()">GENERATE PDF </button>
        </div> <!-- /container -->
        <!-- Scripts down here -->
        <script   src="http://raw.githack.com/MrRio/jsPDF/master/examples/js/jquery/jquery-1.7.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js" ></script>
        
        <script type="text/javascript">
           function generate()
           {
            console.log('Inside generate');
            const doc = new jsPDF('p', 'mm', 'a4');
            var TextField = jsPDF.AcroForm; 
            doc.text("TextField:", 10, 145);
            var textField = new TextField();
            textField.Rect = [50, 140, 30, 10];
            textField.multiline = true;
            textField.value =
              "The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse The quick brown fox ate the lazy mouse"; //
            textField.fieldName = "TestTextBox";
            doc.addField(textField);
            
             doc.save('test.pdf');   
            /* global jsPDF */
           }
        </script>
        <!-- Code editor -->

        <script src="http://raw.githack.com/MrRio/jsPDF/master/examples/js/ace.js" type="text/javascript" charset="utf-8"></script>

        <!-- Scripts in development mode -->
        <script src="http://raw.githack.com/MrRio/jsPDF/master/examples/js/pdfobject.min.js" ></script>
        <script src="http://raw.githack.com/MrRio/jsPDF/master/examples/js/editor.js" ></script>
        <script src="acroform.js" ></script>
    </body>
</html>

【问题讨论】：

标签： pdf-generation jspdf jspdf-autotable

【解决方案1】：

我有同样的问题。在 doc 对象上调用“AcroFormTextField”构造函数对我有用：

var textField = new doc.AcroFormTextField();

【讨论】：

我尝试但对我在控制台中显示错误消息不起作用，即 jsPDF PubSub Error scope.internal.newObjectDeferred is not a function TypeError: scope.internal.newObjectDeferred is not a function

【解决方案2】：

花了几个小时后，我找到了你们可以直接在下面复制并在浏览器上运行的解决方案。 jspdf 的文本字段工作正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jsPDF - Input fields</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
</head>

    <body onload="generate()">
        <div class="container">
            <h1>ON PAGE LOAD pdf download.</h1>
        </div> <!-- /container -->


        <!-- Scripts down here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="preload"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.2.0/jspdf.umd.min.js"></script>

        <script type="text/javascript">
           var jsPDF = window.jspdf.jsPDF; // on page load initate object
           
           function generate()
           {
            console.log('Inside generate');
            const doc = new jsPDF('p', 'mm', 'a4');
            var TextField = jsPDF.AcroForm; 
            doc.text("TextField:", 10, 145);
            var textField = new doc.AcroFormTextField();
            textField.Rect = [50, 140, 30, 10];
            textField.multiline = false;
            textField.value =
              "Test Values"; //
            textField.fieldName = "TestTextBox";
            doc.addField(textField);
            
             doc.save('test.pdf');   
            /* global jsPDF */
           }
        </script>

    </body>
</html>

【讨论】：