带有 AutoTable 的 jsPDF 无法正常工作 - 可能 JavaScript 问题

Question

我有一个简单的示例 table，我想将其下载为 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>

Answer 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>

带有 AutoTable 的 jsPDF 无法正常工作 - 可能 JavaScript 问题

jsPDF with AutoTable not working - Possible JavaScript issue

javascript

jspdf

jspdf-autotable