跳過到頁腳內容
  1. IronPDF
  2. IronPDF博客
  3. Node PDF 工具
  4. JavaScript PDF 產生器
PDF工具

如何使用 JavaScript 生成 PDF 文件

Darrius Serrant
Darrius Serrant
更新:

1.0 引言

Adobe 開發了可攜式文件格式 (PDF)，其目的是為了分享包含文字和圖形的文件。 在線開啟PDF文件需要額外的程序。在當今世界，PDF文件對於重要文件至關重要。 許多企業使用 PDF 文件來建立文件和發票。 開發人員製作並產生符合客戶需求的PDF文件。 由於現代庫，創建 PDF 文件從未如此簡單。 在為專案選擇理想的庫時，我們必須考慮許多因素，包括庫的建置、讀取和轉換能力。

本文將探討用於建立 PDF 的各種JavaScript庫。 我們將探討 JS 函式庫的特性和用例，並專注於以下三個關鍵面向：

  • 執行時間環境相容性
  • 支援自訂字體和排版模組
  • 易用性

讀完本文，您將能夠為您的JavaScript應用程式選擇最合適的 PDF 程式庫。 我們還將介紹IronPDF，這是一個功能強大且方便的 PDF 庫。

使用JavaScript產生 PDF 檔案的步驟

  1. 使用 PDFKit 庫的`text`方法將文字插入 PDF 文件中。
  2. 在JavaScript中使用 pdfmake 函式庫的`createPdf`方法。
  3. 從 jsPDF 庫中實例化 jsPDF 類別以建立 PDF 檔案。
  4. 將配置傳遞給 html2pdf 庫的`html2pdf`方法。
  5. 使用IronPDF庫中的`RenderHtmlAsPdf`方法

2.0 庫

假設我們希望客戶能夠下載並列印我們提供的發票。 我們也希望這份發票能正確列印，格式良好。 接下來我們將介紹一些最受歡迎的程式庫，用於將此發票從 HTML 格式轉換為 PDF 格式。

2.1 PDFKit

PDFKit 是最早引進到龐大的JavaScript生態系統中的 PDF 函式庫之一。 自 2012 年首次發布以來，PDFKit 已獲得廣泛認可，截至 2021 年仍在定期更新。 PDFKit 透過 Webpack 同時支援Node.js和 Web 瀏覽器，儘管與本文討論的其他函式庫相比，它的複雜度可能略高一些。 此外，正如我們將在比較中看到的那樣，某些 PDF 庫本質上是 PDFKit 的封裝。

支援自訂字體和圖像嵌入； 但是，目前還沒有進階 API。 此外，文件編制通常也很複雜。 正如你所預料的，這需要一些時間來適應，而且一開始你會發現，創建 PDF 並不是一項最簡單的任務。

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
JAVASCRIPT

2.2 pdfmake

PDFKit 的一個封裝庫叫做 pdfmake。 兩者之間的主要區別在於它們的程式設計範式：

pdfmake 採用宣告式方法，而 PDFKit 則遵循傳統的命令式技術。 因此，使用 pdfmake 庫可以更輕鬆地專注於 PDF 生成的所需功能，而無需花費時間指導庫如何實現特定結果。

然而，值得注意的是，並非所有看起來有希望的事物都是完美無缺的。 使用 Webpack 並嘗試將自訂字體與 pdfmake 整合可能會導致問題。 遺憾的是，網路上關於這個問題的資訊有限。 即使不使用 Webpack，您仍然可以輕鬆複製 Git 儲存庫並執行字體嵌入腳本。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>
HTML

上述程式碼的輸出結果如下所示。

如何使用JavaScript產生 PDF 檔案：圖 1

2.3 jsPDF

jsPDF 是一個完全使用純JavaScript產生 PDF 檔案的開源軟體包。 它會建立一個 PDF 頁面，並根據您提供的格式對其進行格式化。 jsPDF 是GitHub上使用最廣泛的 PDF 函式庫，它具有很高的可靠性和良好的維護性。 它為Node.js和 Web 瀏覽器提供了易於使用的模組，因為它們是按照 AMD 模組標準導出的。

關於 PDFKit，其 API 遵循命令式程式設計範式，這使得設計複雜的佈局變得具有挑戰性。 至於字體嵌入，唯一需要的額外步驟是將字體轉換為 TTF 文件，這是一個簡單的過程。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
HTML

上述程式碼的輸出結果如下所示。

如何使用JavaScript產生 PDF 檔案：圖 2

2.4 html2pdf

為了將網頁和範本轉換為 PDF 文件，html2pdf 將 jsPDF 和 Html2Canvas 的功能合併到一個模組中。

若要將您的網站轉換為 PDF 文件，請按照以下步驟操作：

  1. 使用 NPM 在伺服器本機安裝 html2pdf JavaScript庫，或像下面的範例一樣將其包含在 HTML 程式碼中：
  2. 新增一個"產生 PDF"函數，該函數將被呼叫以將網頁的指定部分轉換為 PDF。 您可以使用 getElementById 方法選擇所需的段。
  3. 在將"opt"變數傳遞給 html2pdf 之前，透過將其新增至該變數中來自訂格式選項。 這樣您就可以定義各種 PDF 生成設定。
  4. 在你的 HTML 頁面上新增一個按鈕，點擊該按鈕會觸發 generatePDF 函數。
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
HTML

以下是上述程式碼的輸出結果。

如何使用JavaScript產生 PDF 檔案：圖 3

2.5 IronPDF

IronPDF for Node.js簡化了以程式設計方式建立和自訂 PDF 文件的過程。 IronPDF由高效能文件處理庫的可靠提供者Iron Software開發，為在Node.js環境中產生 PDF 提供了一個強大的解決方案。 它與Node.js專案無縫集成，為開發人員提供強大的工具，可以輕鬆產生、格式化和編輯 PDF。

IronPDF庫具有廣泛的功能，包括拆分和合併新建或現有 PDF 文件中的頁面、讀取和編輯現有 PDF 文件、從 PDF 文件中提取圖像、向 PDF 文件添加文字、圖形、書籤、水印、頁眉和頁腳，所有這些都不需要 Acrobat Reader。 可以從 CSS 和 CSS 媒體檔案產生 PDF 文件。 IronPDF允許用戶建立、上傳和更新新的和現有的 PDF 表單。

IronPDF for Node.js的主要特性：

  • 多功能 PDF 生成：借助IronPDF，開發人員可以從各種來源生成 PDF，包括 HTML、CSS、 JavaScript、圖像和其他文件類型。這種靈活性使得創建動態且美觀的 PDF 文件成為可能，並可根據特定需求進行客製化。
  • 進階文件自訂： IronPDF可讓開發人員透過頁首、頁尾、附件、數位簽章、浮水印和書籤等功能來增強 PDF 文件。 這樣就可以建立具有豐富內容和互動式元素的專業級 PDF 檔案。
  • 安全功能： IronPDF提供強大的安全功能，以保護 PDF 檔案免受未經授權的存取。 開發人員可以實施密碼、數位簽章、元資料和其他安全性設定等安全措施，以保護 PDF 文件中包含的敏感資訊。
  • 最佳化效能： IronPDF旨在實現最佳效能，具有完整的多執行緒和非同步支援。 這確保了高效的 PDF 生成，使其適用於對效能要求極高的關鍵任務應用。

功能齊全： IronPDF提供 50 多種功能，用於建立、格式化和編輯 PDF 文檔，為所有與 PDF 相關的任務提供全面的解決方案。 從基本文件產生到進階自訂和安全， IronPDF提供廣泛的功能來滿足開發人員的需求。

要使用自訂JavaScript產生 PDF 文件，請查看以下程式碼，它可以輕鬆地使 HTML 內容更具吸引力：

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();
JAVASCRIPT

在上面的程式碼中，首先定義了一個JavaScript程式碼片段，將所有 <h1> 元素的顏色改為紅色。 然後將此程式碼整合到渲染選項中，並啟用JavaScript執行。 隨後，指定一個包含文字"Hello World!!"的 <h1> 元素的 HTML 內容。 PDF 文件是根據此 HTML 內容，使用定義的渲染選項產生的，確保JavaScript程式碼在渲染過程中執行。 最後，將產生的 PDF 文件儲存為"result1.pdf"。 這段程式碼展示了 IronPDF 將動態JavaScript修改融入 PDF 產生的功能，使開發人員能夠以程式設計方式建立自訂和互動式 PDF 文件。

如何使用JavaScript產生 PDF 檔案：圖 4

3.0 結論

總之，上述JavaScript程式碼在被他人使用時可能容易被濫用，且有潛在的安全風險。 在網站上實施此類程式碼時，請務必考慮未經授權的存取和資料安全漏洞的可能性。此外，還應考慮不同瀏覽器和平台之間的相容性問題，包括確保支援可能不具備所有必要功能的舊版瀏覽器。

相比之下， IronPDF Node.js庫提供了增強的安全措施來抵禦潛在威脅。 它不依賴特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發人員即可使用IronPDF輕鬆建立和讀取 PDF 文件。

該庫提供多種授權選項以滿足不同開發者的需求，包括面向開發者的免費試用許可證和可供購買的額外許可證。 Lite 套餐售價為 $799，包含永久授權、一年產品支援和升級選項，無任何續費。 這些許可證可用於開發、測試和生產環境。 此外，它還支援其他語言，如C# .NET 、 Java和Python 。 請造訪IronPDF網站以了解更多詳情。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me