使用 jsPDF 创建 PDF 文档

最新推荐文章于 2024-05-28 18:01:04 发布

allway2

最新推荐文章于 2024-05-28 18:01:04 发布

阅读量4.1k

点赞数 2

文章标签： python php 开发语言

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

版权

介绍

在上一篇文章使用 PDF.js 库显示 PDF 文件中，我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用jsPDF图书馆为此目的。您可以仅从GitHub 存储库下载最新的库版本或者从官网. 不幸的是，该库的文档很差，所以我们将描述最重要的 API。

先决条件

我们必须下载最新版本的库并将其包含在 HEAD 部分。

<head>
    <script src="jspdf.umd.min.js"></script>
</head>

完成后，我们可以开始使用 jsPDF 库。

jsPDF 库 API

创建文档

首先让我们讨论如何创建一个新文档。就像执行这段代码一样简单。

var doc = new jsPDF(orientation, unit, format, compress);

构造函数可以接受多个参数。

方向-方向的默认值为"portrait"。如果我们想要不同的页面方向，我们可以将其设置为“横向”。
unit - 我们可以告诉 jsPDF 我们想要在哪个单元中工作。使用以下选项之一：“pt”（点）、“mm”（默认）、“cm”、“in”。
格式- 这是默认的页面格式。它可以是"a3"、"a4"（默认）、"a5"、"letter"、"legal"。

我们可以使用以下代码添加新页面。

doc.addPage(width, height);

作为参数，我们以文档构造函数中定义的单位传递页面、宽度和高度。添加页面会将我们移动到此页面，因此任何操作都将在该页面上执行。如果我们想转到另一个页面，我们可以使用 setPage函数。

doc.setPage(pageNumber);

您还可以使用此代码获取实际页码。

doc.internal.getNumberOfPages();

示例应用程序中的第一个示例演示了上述函数的用法。您可以运行应用程序来检查它并调查文章所附的应用程序代码。

处理文本

首先，最重要的是显示文本，我们使用带有3 个参数的 doc.text函数来完成。前两个是文档构造函数中定义的单位中文本的 X 和 Y 位置。请注意，Y 位置是文本基线的位置，因此在 Y 位置设置为 0 的情况下打印某些内容实际上会将其打印在文档的顶部边缘。第三个参数是要显示的文本。

doc.text(10, 10, "Hello world!");

第二件事是用于绘制文本的字体名称。我们可以选择以下之一：courier、helvetica、time。我们通过运行doc.setFont函数来更改字体系列和字体样式。

doc.setFont("courier", "italic");

通过执行 doc.getFontList函数，我们可以找出可用的字体以及可以为给定字体设置的字体样式。

doc.getFontList();
/*
{
    "helvetica": ["normal", "bold", "italic", "bolditalic"],
    "Helvetica": ["", "Bold", "Oblique", "BoldOblique"],
    "courier": ["normal", "bold", "italic", "bolditalic"],
    "Courier": ["", "Bold", "Oblique", "BoldOblique"],
    "times": ["normal", "bold", "italic", "bolditalic"],
    "Times": ["Roman", "Bold", "Italic", "BoldItalic"]
}
*/

由于doc.setFontStyle或 doc.setFontType函数，我们还可以单独更改字体样式，这是第一个的别名。

doc.setFontType("bolditalic");
// is the same as calling
doc.setFontStyle("bolditalic");

接下来是字体大小。这就像调用文档一样简单。setFontSize函数。

doc.setFontSize(40);

最后一件事是文本颜色。我们使用doc.setTextColor函数更改文本颜色并传递三个参数，即 RGB（红、绿、蓝）颜色值。

doc.setTextColor(255, 0, 0);

文本示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var pdf = new jspdf.jsPDF();
            pdf.text(30, 30, 'Hello world!');
            pdf.save('hello_world.pdf');
        </script>
    </body>
</html>

处理图像

图像的唯一功能是 doc.addImage。它将图像作为第一个参数，图像格式/类型作为第二个参数，图像的 X、Y 位置作为第三和第四个参数。我们还可以选择将新图像大小作为第五个和第六个参数传递。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var img = new Image();
            img.src = 'bird.jpg';
            var doc = new jspdf.jsPDF('p', 'mm', 'a3');
            doc.addImage(img, 'JPEG', 100, 100);
            doc.save("bird.pdf");
        </script>
    </body>
</html>

在上面的例子中，我们传递了一个 Image HTML DOM 元素作为addImage函数的第一个参数，但是它也可以是一个 base64 编码的图像字符串。目前，唯一支持的图像格式是 jpeg/jpg 和 png。

处理图形

首先，我们必须设置绘制的形状填充和描边颜色。我们相应地使用doc.setFillColor和 doc.setDrawColor来完成它，将 RGB 颜色值作为参数传递。

doc.setFillColor(100, 100, 240);
doc.setDrawColor(100, 100, 0);

我们还可以设置笔画宽度。笔画宽度单位与文档构造函数中定义的相同。

doc.setLineWidth(1);

每个形状绘制函数都将中心点坐标（三角形是唯一的例外）作为两个第一个参数。他们还采用了最后一个参数绘制风格。可以是"S" , "F" , "DF" , "FD"字符串，含义为："stroke"、"fill"、"stroke and fill"、"fill and stroke"。最后两个当然在绘图操作的顺序上有所不同。

我们可以通过传递两个半径来绘制一个椭圆...

// Empty ellipse
doc.ellipse(50, 50, 10, 5);
// Filled ellipse
doc.ellipse(100, 50, 10, 5, 'F');
// Filled circle with borders

...或一个圆，只通过一个半径...

doc.circle(150, 50, 5, 'FD');

...或矩形，通过传递其宽度和高度...

// Empty square
doc.rect(50, 100, 10, 10);
// Filled square
doc.rect(100, 100, 10, 10, 'F');
// Filled square with borders
doc.rect(150, 100, 10, 10, 'FD');

... 一个圆角矩形，通过其宽度、高度和边框半径...

// Filled sqaure with rounded corners
doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');

...和一个三角形，通过传递每个角坐标。

// Filled triangle with borders
doc.triangle(50, 200, 60, 200, 55, 210, 'FD');

我们还可以绘制通过两点坐标的线。

// Line
doc.line(50, 250, 100, 250);

完整示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <script type="text/javascript" src="dist/jspdf.umd.min.js"></script>
        <script type="text/javascript">
            var doc = new jspdf.jsPDF('p', 'mm', 'a3');
            doc.setFillColor(100, 100, 240);
            doc.setDrawColor(100, 100, 0);
            doc.setLineWidth(1);
// Empty ellipse
            doc.ellipse(50, 50, 10, 5);
// Filled ellipse
            doc.ellipse(100, 50, 10, 5, 'F');
// Filled circle with borders
            doc.circle(150, 50, 5, 'FD');
            // Empty square
            doc.rect(50, 100, 10, 10);
// Filled square
            doc.rect(100, 100, 10, 10, 'F');
// Filled square with borders
            doc.rect(150, 100, 10, 10, 'FD');
            // Filled sqaure with rounded corners
            doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');
            // Filled triangle with borders
            doc.triangle(50, 200, 60, 200, 55, 210, 'FD');
            // Line
            doc.line(50, 250, 100, 250);

            doc.save("jspdf-draw.pdf");
        </script>
    </body>
</html>

概括

在本文中，我们描述了使用 jsPDF 库创建 PDF 文档的过程。这是一个简单而强大的工具，仍在开发中，因此预计很快就会出现新的强大功能。

allway2

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用 jsPDF 创建 PDF 文档

介绍在上一篇文章使用 PDF.js 库显示 PDF 文件中，我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用jsPDF图书馆为此目的。您可以仅从GitHub 存储库下载最新的库版本或者从官网.不幸的是，该库的文档很差，所以我们将描述最重要的 API。先决条件我们必须下载最新版本的库并将其包含在 HEAD 或 BODY 部分的末尾。<head> <script src="js/jspdf.js"&.
复制链接

扫一扫