PDF 工具

如何在JavaScript中创建PDF文件

發佈 2023年6月13日

介紹

在文件共享領域中，便攜式文檔格式(PDF)由 Adobe 開創的技術在維護文本豐富及視覺吸引力的內容的完整性方面發揮了關鍵作用。在線訪問 PDF 文件通常需要專用程式。在當今的數位環境中，PDF 檔案已成為各種重要出版物不可或缺的一部分。許多企業依賴 PDF 文件來製作專業文件和發票。此外，開發人員經常利用 PDF 創建庫來滿足特定客戶的需求。隨著現代庫的出現，生成 PDF 的過程已經得到簡化。選擇最適合進行 PDF 生成的專案時，至關重要的是考慮建構、讀取和轉換功能，確保無縫整合和最佳效能。

JavaScript 函式庫

考慮一下這個情境：我們希望客戶能夠輕鬆下載和列印我們的PDF發票副本。此外，對我們來說，保持發票的精確佈局並確保完美的列印品質是至關重要的。

在本節中，我們將深入探討一系列備受推崇的 JavaScript 函式庫，這些函式庫在將 HTML 轉換為 PDF 文件方面表現出色，為我們提供了多樣化的工具，以高效且精準地生成和轉換文件。

PDFKit

PDFKit 是一個 PDF 函式庫，是最早投入龐大 JavaScript 函式庫生態系統之一的函式庫。自2012年初次發布以來，該產品的人氣顯著上升，截至2021年，仍在定期獲得升級。

使用 Webpack，PDFKit 提供支援 Node 庫和網頁瀏覽器，支援自定義字體和圖像嵌入。

然而，正如我們在比較中所見，有些 PDF 庫實際上只是 PDFKit 的包裝器，也許比 PDFKit 更容易使用一些。

PDFKit 沒有提供高階 API。文件經常也會很困難。正如您所預期的那樣，這需要一些適應過程，您可能會發現使用 JavaScript 生成 PDF 並不總是最容易的工作。

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

JAVASCRIPT

2. pdfmake

與使用傳統命令式方法生成內容的PDFKit不同，pdfmake使用聲明式方法。因此，使用 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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

HTML

在 JavaScript 中如何創建 PDF 文件：圖 1

3. IronPDF

IronPDF旨在讓開發人員更輕鬆地創建、瀏覽和編輯 PDF 文件。它作為一個強大的 PDF 轉換器，並提供創建、編輯和處理 PDF 文件的基本 API。

IronPDF for 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 提供廣泛的功能以滿足開發人員的需求。
以下代碼演示了如何使用將 JavaScript 用於渲染 HTML成為像素完美的 PDF 文件：

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

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

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

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

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

JAVASCRIPT

您也可以執行自訂 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>Happy New Year!</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("executed_js.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>Happy New Year!</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("executed_js.pdf");
})();

JAVASCRIPT

如何在 JavaScript 中創建 PDF 文件：圖 2

當我們點擊下載按鈕時，它將下載 PDF 文件，如上述圖像的 PDF 頁面所示。創建的 PDF 文件將如下所示。

如何在 JavaScript 中創建 PDF 文件：圖 3

可以在中找到更詳細的教程IronPDF 的 C# 創建 PDF 教程.

結論

應該提到的是，當其他人使用上述的 JavaScript 代碼時，具有被濫用和產生安全問題的潛力。將此類代碼放置在網頁或網站上時，考慮未經授權的訪問和數據安全漏洞等危險至關重要。此外，也需要考慮支持可能沒有所有必要功能的過時瀏覽器，以及與各種系統和瀏覽器的兼容性問題。

IronPDF 不僅適用於 Node.js，還適用於包括其他受歡迎的平台。.NET, Java，和Python. 此跨平台的可用性為在不同技術堆疊上工作的開發人員確保了一致性和靈活性。憑藉其豐富的功能集、無縫整合和強大的性能，IronPDF 是開發者希望在其 Node.js 項目中簡化 PDF 生成的寶貴工具。

為滿足不同開發人員的需求，該庫提供多種授權選項，包括一個免費試用授權和額外的開發人員授權可供購買。 $749 Lite 套件附有永久授權、30 天退款保證、一年的軟體支援，以及升級選項。初次購買後沒有其他費用。

< 上一頁
如何在 React 中建立 PDF 檔案

下一個 >
如何在 JavaScript 中查看 PDF 文件