如何在 HTML PDF 转换为多页文档时显示页码?
通过编码创建 PDF 文件是 Web 应用程序的一项重要功能。这对于在以数据为中心的应用程序中创建报表至关重要。PDF 可以包含任何类型的数据，例如表格、图表、图像图形等。单页 PDF 可以轻松地从 HTML 生成。但是，将冗长的 UI 模板转换为多页 PDF 是一个略显耗时的过程。有一些在线转换工具可用于从 Word 和 HTML 文档创建 PDF 文件。此外，还有许多集成库可用于从 HTML 代码生成 PDF。
由于我们的数据通常是动态的，因此处理和转换数据的最佳方法是使用 JavaScript，它使我们能够动态地处理数据。在本教程中，我们将使用 jsPDF 将 HTML 转换为 PDF，并在页脚右下角添加页码。
jsPDF 简介
PDF 在互联网上无处不在，几乎所有企业都依赖它们来共享文档。jsPDF 的创建是为了解决 PDF 文件生成过程中的一个主要问题。创建者决定将其开源，以便开发者社区可以在此基础上进行开发。
JsPDF 是一个 JavaScript 插件，它可以通过解析 HTML 表格或直接从 JavaScript 提供数据来生成带有表格的 PDF 文件。当我们在网站上使用此插件时，它会自动将生成的 PDF 下载到我们的本地计算机。它是一个基于 JavaScript 的用于创建 PDF 文档的开源库。它提供了多种创建具有自定义属性的 PDF 文件的选项。它拥有丰富的插件，支持各种 PDF 生成方法。
以下是三种安装此插件的方法。
使用 NPN
npm install jspdf jspdf-autotable
使用 CDN
<script src= "jspdf.min.js"></script> <script src= "jspdf.plugin.autotable.min.js"></script>
直接从 github 下载 jsPDF 和 jsPDF-autotable。
在 PDF 文档页脚中添加页码
这是我们示例中将使用的基本 HTML 代码。要在 JavaScript 中使用此插件，我们将使用 CDN。
<!DOCTYPE html>
<html>
<head>
<title> Adding page numbers in the footer of a PDF using JSPDF </title>
<meta charset= "UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1.0">
</head>
<body>
</body>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
</html>
示例
第一步是创建一个对象并初始化它。创建方法是调用 new jdPDF() 函数，并将方向、单位和格式作为参数传递给该函数。在本例中，我们指定"p"(纵向)作为方向，"mm"作为单位，"a4"作为格式。
接下来，我们在页面顶部添加一些文本，例如"xyz page"。为了显示文本，我们使用 obj 对象和 text() 方法。它总共需要 5 个参数，其中三个是必需的。第一个参数是字符串或字符串数组。第二个和第三个坐标位置用于确定文本的放置位置。
为了在我们的 PDF 文件中包含多个页面，我们使用 addPage() 方法，该方法接受两个可选参数:格式和方向。新页面的格式，例如 a4、b1、letter、ledger 等。默认格式为 a4。方向是指新页面的方向，可以是纵向或横向。我们也可以使用快捷键"p"或"l"。
下一步是获取总页数，并编写一个循环，使用它在 PDF 中每页的页脚添加页码。
最后，我们调用 save() 方法，并为 PDF 文件指定一个名称。调用此方法时，PDF 文件将自动下载到本地。
<!DOCTYPE html>
<html>
<head>
<title> Adding page numbers in the footer of a PDF using JSPDF </title>
<meta charset= "UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale= 1.0">
</head>
<body>
</body>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script>
var doc = new jsPDF('p','mm','a4');
doc.text("First page", 10, 10);
doc.addPage();
doc.text("Second page", 10, 10);
doc.addPage();
doc.text("Third page", 10, 10);
doc.addPage();
doc.text("Fourth page", 10, 10);
doc.addPage();
doc.text("Fifth page", 10, 10);
doc.addPage();
doc.text("Last page", 10, 10);
const pageCount = doc.internal.getNumberOfPages();
for(var i = 1; i <= pageCount; i++) {
doc.setPage(i);
doc.text('Page ' + String(i) + ' of ' + String(pageCount), 210-20,297-30, null, null, "right");
}
doc.save('output.pdf');
</script>
</html>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
