在 ElectronJS 中生成 PDF

---

Electron 是一個流行的框架，用於使用 JavaScript、HTML 和 CSS 構建跨平臺桌面應用程式。

在這篇文章中，我們將探討如何使用 jsPDF 庫在 Electron 中生成 PDF 檔案。我們將介紹 PDF 生成的基礎知識，如何安裝和使用 jsPDF 庫，以及如何自定義 PDF 的外觀和內容。

PDF 代表行動式文件格式 (Portable Document Format)。PDF 是一種用於表示文件的檔案格式，它獨立於用於建立它們的應用程式作業系統、軟體和硬體。PDF 檔案可以在任何具有 PDF 閱讀器的裝置上開啟和檢視，通常用於共享文件和資料。

PDF 由 Adobe Systems 開發。

PDF 檔案可以包含各種內容，包括文字、影像、表格和其他資料，並且可以使用頁面佈局、邊距以及頁首和頁尾等功能進行自定義。

在 Electron 中生成 PDF 檔案

我們將使用 jsPDF 庫在 Electron 中建立 PDF 檔案，這是一個流行且易於使用的 JavaScript PDF 檔案建立框架。

在終端視窗中執行以下命令來安裝 jsPDF 庫：

npm install jspdf

安裝後，透過在我們的 Electron 應用程式中引入該庫並使用 "jsPDF" 函式 Object() { [native code] } 建立一個新的 PDF 檔案，我們可以使用該庫生成 PDF 檔案。

以下是如何建立一個只包含一頁文字的簡單 PDF 檔案的示例：

const { jsPDF } = require("jspdf");
const doc_file = new jsPDF();
doc_file.text('Welcome Home!', 15, 15);
doc_file.save('demo_document.pdf');

執行此程式碼後，將建立一個新的 PDF 文件，新增“Hello, World！”字樣，並將文件另存為名為“document.pdf”的檔案，儲存在當前目錄中。

自定義 PDF 的外觀和內容

jsPDF 包中提供了許多選項來更改 PDF 的外觀和風格。例如，我們可以自定義 PDF 的頁面尺寸、邊距、字型以及新增影像和表格。

頁面尺寸

要設定頁面尺寸，我們可以使用 "setProperties" 方法，它允許我們指定 PDF 的頁面尺寸和方向：

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setProperties({
   title: 'New Doc File',
   subject: 'Creating text document',
   author: 'Prerna Tiwari',
   keywords: 'text, document, PDF',
   creator: 'New Text'
});
doc_file.text('Welcome Home!', 10, 10);
doc_file.save('demo_document.pdf');

邊距

要設定 PDF 的邊距，我們可以使用 "setMargins" 方法，它允許我們指定 PDF 的上、下、左和右邊距（以點為單位，1 點 = 1/72 英寸）：

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setMargins(5, 5, 5, 5);
doc_file.text('Welcome Home!', 5, 5);
doc_file.save('demo_document.pdf');

字型

要設定 PDF 的字型，我們可以使用 "setFont" 方法，它允許我們指定字體系列、大小和樣式：

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setFont('Times New Roman', 'Italics');
doc_file.text('Welcome Home!', 10, 10);
doc_file.save('demo_document.pdf');

新增影像

要向 PDF 新增影像，我們可以使用 "addImage" 方法，它允許我們指定影像檔案、位置和大小：

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.addImage(imageData, 'PNG', 15, 15, 150, 160);
doc_file.save('demo_document.pdf');

此程式碼將在指定位置和大小將 JPEG 圖片新增到 PDF 檔案中。

新增表格

要向 PDF 新增表格，我們可以使用 "autoTable" 方法，它允許我們指定表格資料、列和佈局選項：

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
const tableData = [
   ['Name', 'Age', 'City'],
   ['John', '30', 'New York'],
   ['Jane', '25', 'Chicago'],
   ['Bob', '35', 'Los Angeles'] 
];
doc_file.autoTable({
   head: [['Name', 'Age', 'City']],
   body: tableData
});
doc+_file.save('demo_document.pdf');

此程式碼將使用指定的標題和資料向 PDF 新增一個表格。

結論

在本教程中，我們學習瞭如何使用 jsPDF 包在 Electron 中建立 PDF 檔案。我們已經介紹了 PDF 建立的基礎知識、jsPDF 庫的安裝和使用以及如何修改 PDF 的外觀和風格。

透過使用 jsPDF 模組，在 Electron 中建立 PDF 檔案並修改其外觀和內容以滿足應用程式的需求非常簡單。對於共享文件和資料，PDF 檔案是一個實用且支援良好的選項，可用於各種應用程式。