javascript 中未定义 jsPDF

Question

我导入了 jsPDF 库并尝试导出为 PDF，但我收到 JavaScript 错误 jsPDF 未定义。

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

我在这里 fiddle 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>

Answer 1

我发现了两个主要问题，已在 fork 中解决。首先，你没有link到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');
});

})

Answer 2

我认为您的代码似乎正确，但 cdn 存在一些问题。我在这里使用了调试器。

这是我创建的一个工作示例，您可以参考。如果由于 Whosebug 限制而没有看到 pdf 下载，请使用此 fiddle 进行测试。

Working Download PDF demo

我用的cdnlink是：JsPDF CDN LINK。您绝对可以寻找任何其他可用的版本。

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>

Answer 3

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();

javascript 中未定义 jsPDF

jsPDF is not defined in javascript

javascript

jspdf