import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF 工具

如何在JavaScript中创建PDF文件

發佈 2023年6月13日

介紹

在文件共享領域中，可攜式文件格式 (PDF), 由 Adobe 開創，對於保持豐富文本和視覺吸引力內容的完整性起著關鍵作用。在線訪問 PDF 文件通常需要專門的程式。在當今的數位環景中，PDF 文件已成為各種重要出版物不可或缺的一部分。許多企業依賴 PDF 文件來創建專業文件和發票。此外，開發人員經常使用 PDF 創建庫來滿足特定客戶的需求。隨著現代庫的出現，生成 PDF 的過程變得更加簡便。在為涉及 PDF 生成的項目選擇最合適的庫時，必須考慮建構、讀取和轉換能力等因素，確保無縫集成和最優性能。

JavaScript Libraries

考慮例如，我們希望客戶能夠輕鬆下載並列印我們的PDF發票。此外，對我們來說保持發票的精確佈局和確保完美的列印質量是至關重要的。

在本節中，我們將深入探討一些高度評價的JavaScript庫，這些庫在轉換和創建HTML到PDF文件方面表現出色，為我們提供了高效準確的文件生成和轉換工具。

1. 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 生成的預期功能上，而不是浪費時間教導庫如何實現某個結果。

需要注意的是，儘管某些解決方案可能看起來很有前途，但它們未必完美無缺。這方面的一個例子是將自定義字體與 pdfmake 集成時使用 Webpack，這可能會導致問題。遺憾的是，關於這一特定問題的在線文檔有限。但是，如果您不使用 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轉換器，提供了一個基礎API用於創建、編輯和處理PDF文件。

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文檔。從基本的文檔生成到高級的自訂和安全，IronPDF提供了一個全面的解決方案來滿足開發人員的所有PDF相關任務需求。

下面的代碼演示了如何 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 使用 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

更多詳細的教程可以在這裡.

結論

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

IronPDF 不僅適用於 Node.js，還適用於包括其他流行平台。 .NET, Java，和 Python. 跨平台的可用性確保了在不同技術堆疊上工作的開發人員的一致性和靈活性。憑藉其豐富的功能集、無縫整合和穩定的性能，IronPDF 是尋求在 Node.js 專案中簡化 PDF 生成的開發人員的寶貴工具。

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

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

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