logo标签列表

在JavaScript中，jsPDF未定义。

javascriptjspdf
3

我导入了jsPDF库并尝试将其导出为PDF，但是我遇到了JavaScript错误“jsPDF未定义”。

我尝试了其他类似的帖子，但对我没有用。

我在这里得到了这个示例 https://jsfiddle.net/aybhvf8e/1/

<script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

$( document ).ready(function() {

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

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});


<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
4个回答
4

我认为你的代码看起来是正确的，但可能存在CDN方面的问题。我在这里使用了调试版本。

这里有一个我创建的可用示例，供您参考。如果由于stackoverflow限制而无法看到PDF下载，请使用此fiddle进行测试。

可用的下载PDF演示

我使用的CDN链接是：JsPDF CDN链接。 您可以寻找其他可用版本。

function createPdf() {

  var doc = new jsPDF();
  
  source = $('#content')[0];
  
  specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true
        }
    };
  
  doc.fromHTML(
    source,
    15,
    15, 
    {
      'width': 170,
      'elementHandlers': specialElementHandlers
    }
  );
  doc.save('sample-file.pdf')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>

1
我发现两个主要问题，在这个分支中已经解决。首先，您没有链接到jspdf。您可以在HTML代码中完成此操作：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

其次，您需要在ready()函数之外添加click事件监听器。这会导致两个问题：事件可能未被附加（确保检查ready()函数的原因），并且您在ready()函数中定义的变量在click函数中不可用（超出范围）。您可以通过在ready监听器内设置click监听器来解决这两个问题：
$( document ).ready(function() {

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};
$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

})
0
对我来说，只有这个方法才能解决问题'jsPDF未定义 - const doc = new jspdf.jsPDF()，就像下面的简单示例中所展示的那样。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
  <title>Convert <div> to PDF</title>
</head>
    <body>

        <div id="content">
            <h1>Hello, World!</h1>
        </div>

        <button onclick="generatePDF()">Generate PDF</button>

        <script>
        function generatePDF() {
        // Default export is a4 paper, portrait, using millimeters for units
        **const doc = new jspdf.jsPDF();**

        doc.text("Hello world!", 10, 10);
        doc.save("a4.pdf");
        }
        </script>

    </body>
</html>

-1
VQR.....有一个问题，我的应用程序在没有网络的地方有时候可以工作，所以下一行如果没有网络的话是不能工作的，对吗？
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

所以，我安装了它...

npm install jspdf --save

但是现在，我需要复制哪些文件到我的Js目录才能使这行代码工作？

var doc = new jsPDF();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接