JsPDF的 Autotable 插件

最新推荐文章于 2024-09-13 22:21:49 发布

allway2

最新推荐文章于 2024-09-13 22:21:49 发布

阅读量2.3k

点赞数

文章标签： python php 开发语言

本文链接：https://blog.csdn.net/allway2/article/details/121596127

版权

JsPDF 是一个 JavaScript 插件，用于通过解析 HTML 表或从 JavaScript 直接提供数据来生成 pdf 的包含表。当我们在我们的网页中使用这个插件时，它会自动将生成的pdf下载到我们的本地机器上。

安装 jsPDF-Autotable

有3种方法可以安装这个插件

使用 NPM
```
npm install jspdf jspdf-autotable
```

使用 CDN

        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript" src="dist/jspdf.plugin.autotable.min.js"></script>

从 github下载jsPDF和jsPDF-autotable

HTML代码

这是基本的 HTML 代码，它将用于以下所有示例。我们将使用 CDN 在 JavaScript 中使用这个插件。该网页包含一个按钮，单击该按钮后，将下载到本地计算机。

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript" src="dist/jspdf.plugin.autotable.min.js"></script>

    </head>
    <body>
        <button type="button" onclick="demo()">Download!</button>
    </body>
</html>

生成 jsPDF-Autotable

下面显示的示例代码演示了如何创建一个简单的表。

第一步是初始化一个对象。在第 3 行中，obj是使用new jdPDF()创建的，并且 'landscape' 作为参数传递给构造函数，表示 pdf 为横向格式。可以传递的其他格式是“纵向”。
接下来，我们在页面顶部放置一些文本，例如“示例表”。第 4 行使用obj对象调用text()方法来显示文本。它总共需要 5 个参数，其中 3 个是必需参数。第一个参数是字符串或字符串数组。第二个和第三个是坐标位置，用于确定必须放置文本的位置。
现在我们创建表。在第 5 行，我们调用了autoTable()方法。它包含很多论点，但我们将关注一些基本的论点。startX , startY表示放置桌子的坐标位置。然后我们有head接收表示列名的文本数组。这里我们使用了 3 个列名称，即“姓名”、“城市”、“电话号码”。然后我们有一个包含每一行数据作为数组的主体。
最后，我们调用save()方法为 pdf 传递一些名称。遇到此方法时会自动将 pdf 下载到本地机器。

            function demo() {
                var obj = new jspdf.jsPDF('landscape')
                obj.text('Sample Table', 20, 20)
                obj.autoTable({
                    startX: 30,
                    startY: 30,
                    head: [
                        ['Name', 'City', 'Phone No.']
                    ],
                    body: [
                        ['Donna', 'New York', '8456210'],
                        ['Rachel', 'Los Angeles', '7845521'],
                        ['Harvey', 'Chicago', '9865371']
                    ],
                });
                obj.save('example.pdf');
            }

在 PDF 中添加新页面

我们可以在 pdf 中添加多个页面。addPage()方法接受 2 个可选参数，即格式和方向。 Format表示新页面的格式，例如a4、b1、letter、ledger等，默认格式为a4。方向表示新页面的方向，即“纵向”或“横向”。我们也可以分别使用快捷方式“p”或“l”。示例代码如下所示。

function demo() {
                var obj = new jspdf.jsPDF('landscape')
                obj.text('Page 1', 20, 20)
                obj.autoTable({
                    startY: 30,
                    startX: 30,
                    head: [
                        ['Name', 'City', 'Phone No.']
                    ],
                    body: [
                        ['Donna', 'New York', '8456210'],
                        ['Rachel', 'Los Angeles', '7845521'],
                        ['Harvey', 'Chicago', '9865371']
                    ],
                });

                obj.addPage(format = 'a0', orientation = 'p');

                obj.text('Page 2', 20, 20)
                obj.autoTable({
                    startY: 30,
                    startX: 30,
                    head: [
                        ['Name', 'City', 'Phone No.']
                    ],
                    body: [
                        ['Donna', 'New York', '8456210'],
                        ['Rachel', 'Los Angeles', '7845521'],
                        ['Harvey', 'Chicago', '9865371']
                    ],
                });
                obj.save('example.pdf');
            }

这些是使用 jsPDF 生成表格的少数基本和常用方法。我们可以以不同的样式构建这些 PDF。更多想法请参考官方示例。

更多信息请参考GitHub 上的官方文档和官方源代码。