PDF 工具

如何使用 JavaScript 生成 PDF 文件

發佈 2023年5月23日

1.0 介紹

Adobe 開發了可攜式文件格式(PDF)用於共享包含文本和圖形的文件。需要額外的程式來在線開啟 PDF 檔案。在現代世界中，PDF 檔案對於重要文件相當關鍵。許多企業使用 PDF 文件創建文檔和發票。開發人員製作和生成 PDF 文件以滿足客戶需求。由於現代庫的存在，創建 PDF 的能力從未如此簡單。在為專案選擇理想的程式庫時，我們必須考慮多個因素，包括程式庫的構建、讀取和轉換能力。

在本文中，我們將討論用於創建 PDF 的各種 JavaScript 函式庫。我們將探討 JS 庫的功能和使用案例，重點關注三個主要方面：

運行時環境相容性
支援自訂字體和排版模組
易於使用
閱讀完這篇文章後，您將能夠為您的 JavaScript 應用程序選擇最合適的 PDF 庫。我們還將介紹IronPDF，一個強大且方便的PDF函式庫。
使用 Javascript 生成 PDF 文件的步驟

2.0 程式庫

假設我們希望客戶能夠下載並打印我們的發票。我們也希望這張發票能正確打印，格式良好。在這裡，我們將檢視一些最受歡迎的庫，用於將這份發票從HTML格式轉換為PDF。

2.1 PDFKit

在廣泛的 JavaScript 生態系統中，最早引入的 PDF 庫之一是 PDFKit。自2012年首次發行以來，它已獲得相當的知名度，截至2021年仍持續獲得定期更新。PDFKit 通過 Webpack 支援 Node.js 和網頁瀏覽器，儘管相較於此處討論的其他庫，它可能略顯複雜。此外，如我們在比較中將看到的，某些 PDF 函式庫本質上是 PDFKit 的封裝。

支援自訂字體和影像嵌入，但沒有高階 API。此外，文件通常很複雜。正如你所預料的，這需要一些時間來適應，起初，你會發現創建PDF並不是最簡單的任務。

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                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 和網頁瀏覽器，因為它們是根據 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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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，請按照以下步驟操作：

使用 NPM 在您的伺服器上本地安裝 html2pdf JavaScript 函式庫，或按以下示例將其包含在您的 HTML 代碼中：
新增「生成 PDF」功能，會被調用以將指定的網頁段落轉換為 PDF。您可以使用 getElementById 方法來選擇所需的段落。
在將 opt 傳遞給 html2pdf 之前，通過將其添加到 "opt" 變量來自訂格式選項。這允許您定義 PDF 生成的各種設置。
在您的 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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

HTML

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

如何使用 JavaScript 生成 PDF 文件：圖 3

2.5 IronPDF

IronPDFfor Node.js 簡化了以程式方式建立和自訂 PDF 文件的過程。由值得信賴的高效文檔處理庫提供商 Iron Software 開發，IronPDF 為 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 提供廣泛的功能以滿足開發人員的需求。
使用生成 PDF 文件自訂 JavaScript請看看下面的程式碼，它可以輕鬆地使 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 執行。接著，包含 <h1> 元素和文字 "Hello World" 的 HTML 內容!!已指定。 PDF 文件從此 HTML 內容生成，並運用定義的渲染選項，以確保在渲染過程中執行 JavaScript 代碼。最後，生成的 PDF 文件被保存為 "result1.pdf"。此代碼展示了IronPDF在PDF生成中整合動態JavaScript修改的能力，使開發人員能夠以編程方式創建自訂和互動的PDF文件。

如何使用JavaScript生成PDF文件：圖4

3.0 結論

總之，上述 JavaScript 代碼在被他人使用時可能會遭到濫用並存在潛在的安全風險。在網站上實施此類代碼時，重要的是要考慮未經授權的訪問和數據安全漏洞的可能性。還應考慮不同瀏覽器和平台之間的兼容性問題，包括需要確保對可能不具備所有所需功能的舊瀏覽器的支持。

相比之下，IronPDF Node.js 資料庫提供增強的安全措施，以防範潛在的威脅。它不依賴特定瀏覽器，且與所有主流瀏覽器兼容。只需幾行代碼，開發人員即可使用 IronPDF 輕鬆創建和讀取 PDF 文件。

該庫提供多種授權選項，以滿足不同開發者的需求，包括一個免費試用開發者授權和額外的授權可供購買。 Lite 套餐，價格為 $749，包括永久許可證、一年的產品支持和升級選項，無需支付重複費用。這些授權可用於開發、測試和生產環境。此外，也可以用於其他語言，例如C# .NET, Java和Python. 訪問IronPDF網站以獲取更多詳細資訊。

< 上一頁
如何在 JavaScript 中查看 PDF 文件

下一個 >
如何在 JavaScript 中列印 PDF 文件