数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何为多页 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 页面”。要显示文本，我们使用 obj 对象和 text() 方法。它总共需要 5 个参数，其中 3 个是必需的。字符串或字符串数组是第一个参数。第二个和第三个坐标位置用于确定文本应放置在何处。
为了在我们的 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>
817 次查看
