logo标签列表

未捕获的引用错误：jsPDF未定义。

javascripthtmljspdf
33

这是我的 HTML 代码，我想将输出在 abc div 中的任何内容转换为可下载的 PDF 文件。

<!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Reports
        </h1>
        <ol class="breadcrumb">
            <li>
                <i class="fa fa-dashboard"></i>  <a href="dashboard">Dashboard</a>
            </li>
            <li class="active">
                <i class="fa fa-edit"></i> Reports
            </li>

        </ol>
        <body>
          <div id="abc">
</div>
<div id="editor"></div>
<button id="cmd">Download Survey Report</button>
        <div id="abc">

        </div>
        </body>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
        <script>

                var doc = new jsPDF();
                var specialElementHandlers = {
                  '#editor': function (element, renderer) {
                return true;
            }
        };

        $('#cmd').click(function () {
            doc.fromHTML($('#abc').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('SurveyReport.pdf');
        });
        </script>


        <script>
        firebase.auth().onAuthStateChanged(function(user){
          if(user){
            var userID = user.uid;
            RetrieveSurvey(userID,1,PrintSurvey(document.getElementById("abc")));
          }
        })
        </script>

    </div>
</div>

我在控制台遇到了这个错误：

"未捕获的引用错误：jsPDF未定义"

我不确定我做错了什么，我甚至已经在 script 标签中添加了 jsPDF...

1
将您的脚本放在<body>标签内，然后再试一次。 - loelsonk
1
为什么你在<div>标签内部放置了<body></body>标签？此外，id应该是唯一的，你不能有两个id="abc"标签。 - gen_Eric
5个回答
77
请提供需要翻译的内容。
window.jsPDF = window.jspdf.jsPDF;

这就是我一直在寻找的！ - kunj choksi
它起作用了，谢谢！ - Crash Override
工作正常。谢谢。 - Mayank Dudakiya
1
可以正常工作。然而，为了让第一次使用它的人们明确...我将此代码用于我的脚本文件的顶部。不确定它是否可以在html文件内部的脚本标记中运行。 - Andres Alvarez
2
有人能解释一下这行代码的作用吗？我猜window.jsPDF成为了window对象的一个新属性，但是window.jspdf.jsPDF是什么呢？window.jspdf代表jsPDF脚本文件吗？.jsPDF是该文件中的一个对象吗？ - Nikkorian
11

首先，你的HTML无效。请查看 W3S。

将链接到 jspdf 的代码放在 <head> 标签中，你甚至可以把它放在 <body> 标签内。

用最新的 jspdf 替换你当前的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
9

如在https://github.com/matb/jsPDF中提到的，使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

将此脚本添加至头标签中

2

@https://stackoverflow.com/users/4833506/nikkorian

window.jsPDF = window.jspdf.jsPDF;

这种方法将 jspdf 对象的 jsPDF 属性赋值给窗口上的 jsPDF 属性，使您可以直接使用 jsPDF 而不必使用 jspdf.jsPDF。

然而，需要注意的是，虽然这种方法在某些情况下可以工作，但对于更大、更复杂的应用程序或在使用模块时可能不是理想的选择。使用全局变量可能会导致命名冲突或变量范围的问题。

在较大的应用程序或基于模块的环境中，最好在每个使用它的模块中导入 jsPDF。然而，考虑到您的应用程序的上下文和简单性，您采取的方法是完全可以的，并且可以快速解决问题。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
-3
使用这个：
window.jsPDF = require('jspdf');

用这个代替：

import jsPDF from 'jspdf';
2
欢迎来到SO！感谢您的贡献。不过，我会编辑您的答案以添加更多的解释。如需更多帮助，请参阅如何回答。 - technogeek1995
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接