带有 AutoTable 的 jsPDF 不起作用 - 可能的 JavaScript 问题答案

【问题标题】：jsPDF with AutoTable not working - Possible JavaScript issue带有 AutoTable 的 jsPDF 不起作用 - 可能的 JavaScript 问题
【发布时间】：2020-06-28 07:30:11
【问题描述】：

我有一个简单的示例表，我想以 PDF 格式下载。我在此处按照 AutoTable 文档进行设置：https://github.com/simonbengtsson/jsPDF-AutoTable

我不知道如何创建实际的下载超链接，所以我尝试了一些 JavaScript 并得到一个 ReferenceError: $ is not defined

我更喜欢使用标准超链接。

我的代码如下：

<table id="myTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

<button id="downloadPdf">Download Table as PDF</button>

<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.plugin.autotable.js"></script>

<script>
$("#downloadPdf").click(function(){
    var doc = new jsPDF()
    doc.autoTable({ html: '#myTable' })
    doc.save('table.pdf')
})
</script>

【问题讨论】：

如果使用$则必须导入jquery

标签： javascript jspdf jspdf-autotable

【解决方案1】：

您必须导入 jquery 文件，工作示例 - https://jsfiddle.net/nishantj/bja0fnve/

它正在下载 pdf，按预期工作。使用了相关脚本的cdn版本。

$("#downloadPdf").click(function(){
    var doc = new jsPDF()
    doc.autoTable({ html: '#myTable' })
    doc.save('table.pdf')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<table id="myTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
<button id="downloadPdf">Download Table as PDF</button>

【讨论】：