資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
