使用 jsPdf Autotable 时出错

Question

我试图将数据打印到 PDF 中，所以我使用了 jsPdf ，当时数据没有正确对齐到我的 PDF table 中。所以我在许多网站上搜索，他们推荐我使用 jsPdf Auto-table 。这里出现了问题，在注入 jsPdf Auto-table 之前一切正常（没有对齐）但是在我插入

之后

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.16/jspdf.plugin.autotable.js"></script>

这进入我的 index.html 时出现错误，

Uncaught ReferenceError: jsPDF is not defined (jspdf.plugin.autotable.js:10)

Answer 1

在 jspdf-autotable 插件之前，您需要包含 jspdf 库 。有关详细信息，请参阅 docs。您可能还需要最新版本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>

<!-- EDIT: For now, add this line between the libraries -->
<!-- The reason being that jspdf includes a version of requirejs which -->
<!-- jspdf-autotable currently is not expecting. You can also use version < 2.0.21 -->
<script>if (window.define) delete window.define.amd;</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.28/jspdf.plugin.autotable.js"></script>

<script>
var columns = ["ID", "Name", "Country"];
var rows = [
   [1, "Shaw", "Tanzania"],
   [2, "Nelson", "Kazakhstan"],
   [3, "Garcia", "Madagascar"]
];
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows);
doc.save('table.pdf');
</script>

Answer 2

这没有直接关系，但对于那些试图在 Angular 4 由 angular cli 创建的项目上使用它并得到 doc.autoTable 不是函数的人来说。 在 .angular-cli.json 文件中包含 jspdf 和 jspdf.plugin.autotable 脚本数组

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
     "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.src.js"
  ],

然后在你要使用auto的组件里table先导入jspdf和jspdf-autotable

import * as jsPDF from 'jspdf';
import * as jpt from 'jspdf-autotable';

然后如下使用。 您必须在进行 doc.autotable 调用之前声明 jpt 变量

let doc = new jsPDF('p', 'pt');    jpt; 
doc.autoTable(this.columns, this.data);
doc.text(20, 20, 'Hello world!');
doc.text(20, 40, 'This is client-side Javascript, pumping out a PDF.');

// Save the PDF
doc.save('Test.pdf');