在 ElectronJS 中產生 PDF-js教程-PHP中文網

在 ElectronJS 中產生 PDF

WBOY

發布： 2023-09-06 12:49:02

轉載

1039 人瀏覽過

在 ElectronJS 中生成 PDF

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

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

PDF 代表可攜式文件格式。 PDF 是一種用於表示文件的文件格式，獨立於用於建立文件的應用程式作業系統、軟體和硬體。 PDF 檔案可以在任何具有 PDF 閱讀器的裝置上開啟和查看，通常用於共用文件和資料。

PDF 由 Adobe Systems 開發。

PDF 文件可以包含各種內容，包括文字、圖像、表格和其他數據，並且可以使用頁面佈局、頁邊距、頁首和頁尾等功能進行自訂。

在 Electron 中產生 PDF 檔案

jsPDF 程式庫是一個廣受歡迎且易於使用的框架，用於在 JavaScript 中建立 PDF 文件，將用於在 Electron 中建立 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」方法，該方法允許我們以磅（1/72 英吋）為單位指定 PDF 的上、下、左、右邊距 -< /p>

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');

登入後複製

此程式碼將在指定位置和大小的 PDF 檔案中新增 JPEG 影像。

新增表格

要將表格新增到 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 中新增一個包含指定標題和資料的表格。