jsPDF 的问题

Question

所以我最近开始学习html/javascript。我正在尝试创建一个页面，然后可以将输入的信息存储到 pdf 中以供保存/打印。我在尝试让它工作时遇到了很多问题，所以我去搜索一些基本代码，这样我就可以在继续我的项目之前看到 jspdf 的工作原理。这是我找到的代码：

// Create a function to generate the PDF
function generatePDF() {
  const doc = new jsPDF();
  doc.text('Hello, World!', 10, 10);
  doc.save('my-document.pdf');
}

// Attach the function to the button click event
document.getElementById('cmd').addEventListener('click', generatePDF);

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

<div id="abc">
  <!-- Your content here -->
  <p>Hello, World!</p>
</div>
<button id="cmd">Generate PDF</button>

我遇到的问题是，通过边缘开发工具检查时也会出现错误。这是我发现的错误：

未捕获的引用错误：jsPDF 未在 HTMLButtonElement.generatePDF 中定义

对此我很陌生，我真的不知道为什么它会给我这个错误。有人可以尝试解释一下吗？

我尝试了 jspdf 的多个不同的库引用，结果都是相同的。

Answer 1

jspdf

的最新发布版本不是

2.5.3

而是

2.5.1

。因此，我插入了一个新的 CDN。请参阅此处：https://www.npmjs.com/package/jspdf

jspdf

不会直接向您公开类，而是将名为

jspdf

的属性作为全局变量放入

window

对象中，我们可以从中实例化该类。我已经做到了。您的代码现在应该可以正常运行了。

// Create a function to generate the PDF
function generatePDF() {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  doc.text('Hello, World!', 10, 10);
  doc.save('my-document.pdf');
}

// Attach the function to the button click event
document.getElementById('cmd').addEventListener('click', generatePDF);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="abc">
  <p>Hello, World!</p>
</div>
<button id="cmd">Generate PDF</button>