跳至頁尾內容
  1. IronPDF
  2. IronPDF 部落格
  3. Node PDF 工具
  4. JavaScript列印PDF
PDF工具

如何在 JavaScript 中列印 PDF 文件

Darrius Serrant
Darrius Serrant
已更新:

1.0 簡介

可攜式文件格式 (PDF) 是由Adobe開發，旨在分享包含文字和圖形的文件。 需要額外的程式才能在線上開啟PDF文件。PDF文件對於當今社會中的關鍵資訊非常重要。 許多企業使用PDF文件來建立文件和發票。 為了滿足客戶需求，開發者製作PDF文件。 感謝現代程式庫建立PDF從未如此簡單。

為了選擇專案中使用這類程式庫的理想程式庫，我們必須衡量多個因素，包括建置、閱讀和轉換能力。
在本教程中，我們將探討各種JavaScript程式庫以製作PDF。 我們將分析JS程式庫和實際應用場景，同時著重於三個重點：

  • 執行配置
  • 促進打字和自訂字型的模組
  • 使用簡便

看完這篇文章後，您將能夠選擇適用於您的JavaScript應用程式的理想PDF程式庫。 最後，我們還將介紹IronPDF，一個實用且高效的PDF程式庫。

如何在JavaScript中列印PDF文件

  1. 將PDF嵌入到iframe標籤中
  2. 使用iframe中PDF檢視器附帶的列印選項
  3. 使用JavaScript列印當前頁面的PDF
  4. 調用printJS方法並將元素ID傳遞給printable屬性
  5. 使用其他程式庫在.NET C#中利用Print方法進行列印

2.0 程式庫

考慮到我們希望客戶能夠下載和列印一份我們發票的副本。這張發票需要準確且適當地列印。 在這裡，我們將更仔細地研究可用於將此發票從HTML格式轉換為PDF的許多程式庫中的一些。

2.1 純JavaScript程式碼

通常，要列印PDF文件的內容，我們會下載到我們的電腦上，然後開啟並選擇列印選項。 JavaScript，另一方面，使得直接從網頁列印PDF文件變得簡單。 您所需要的只是網站上的一個iframe或能夠動態建構一個，新增文件並列印。 我將展示如何使用JavaScript列印PDF文件。使用iframe顯示在另一個網頁中的網頁。 為了顯示網頁，iframe需要知道其來源。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>

    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>

        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>

    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>

        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
HTML

要列印PDF，文件的內容可以使用iframe顯示，然後使用JavaScript列印內容。 在這兩種情況下，都需要iframe。 在上面的範例中，有一個帶有來源（PDF）的iframe。 還有一個按鈕型別的輸入元素。

按鈕的printPdf方法。

如何在JavaScript中列印PDF文件：圖1 - 列印

2.2 Print.js

Print.js主要是為了讓我們能夠從應用程式內部列印PDF文件而不需要導航離開、從使用者介面匯入和列印它們或使用嵌入。 這是為了特殊情況，使用者只需要列印PDF文件而不需要開啟或下載。

例如，當使用者要求列印在伺服器端生成的報告時，這可能是有幫助的。 這些報告以PDF文件形式返回給您。 這些文件可以在不需要開啟的情況下列印。 在我們的應用程式中，Print.js提供了一種便捷的方法來列印這些文件。

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>

    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>

    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>

    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>

    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
HTML

上述程式碼可用於直接從網站列印PDF文件。它顯示列印它將列印以ID命名為"print-area"的HTML元素內所有可用的HTML字串。

如何在JavaScript中列印PDF文件：圖2 - 列印這些字串

2.3 IronPDF - Node.js的PDF程式庫

IronPDF是一個完善的Node.js PDF程式庫，在準確性、易用性和速度方面表現出色。 提供了廣泛的功能，直接從HTML、URL和React中的圖像生成、編輯和格式化PDF。 支援包括 Windows、macOS、Linux、Docker 和雲平台如 Azure 和 AWS 等各種平台，IronPDF 確保跨平台相容性。 其使用者友好的 API 使開發者能夠快速將 PDF 生成和操控整合到其 Node.js 專案中。

IronPDF for Node.js的主要功能：

  • 多功能的PDF生成：使用IronPDF，開發者可以從包括HTML、CSS、JavaScript、圖片和其他文件型別在內的多個來源生成PDF。這種靈活性使得能夠建立針對特定需求的動態且視覺美觀的PDF文件。
  • 高級文件自訂：IronPDF能夠讓開發者增強PDF文件，增加標題、頁尾、附件、數位簽名、浮水印和書簽等功能。 這允許建立具有豐富內容和互動元素的專業級PDF。
  • 安全功能：IronPDF提供強大的安全功能，以保護PDF免受未經授權的存取。 開發者可以執行如密碼、數位簽名、元資料和其他安全設置等安全措施來保護PDF文件中包含的敏感資訊。
  • 最佳性能：IronPDF為最佳性能而設計，提供完整的多執行緒和非同步支援。 這確保了高效的PDF生成，使其適合在性能至關重要的任務中使用。
  • 完整功能集：IronPDF提供超過50種用於建立、格式化和編輯PDF檔案的功能，為所有PDF相關任務提供全面的解決方案。 從基本文件生成到高級自定義和安全，IronPDF擁有滿足開發者需求的廣泛功能。

以下是一個例子，展示了如何從HTML文件、HTML字串和URL生成並儲存PDF文件以保留格式以供列印：

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

有關PDF相關任務的更多程式碼範例，請存取此IronPDF Code Examples for Node.js頁面。

如何在JavaScript中列印PDF文件：圖3 - IronPDF

3.0 總結

使用者可以看到上面的JavaScript程式碼，但可能會被其他人濫用。 這種方式使用原始碼是可能的。 此外，將程式碼新增到網站上以威脅通過它傳輸的資料安全性並不難。 上述JavaScript程式庫在不同瀏覽器上的檢視可能不同。 因此，程式碼必須在各種系統上運行才能發布。 由於某些新功能不被較舊的瀏覽器支援，我們還需要查看瀏覽器的相容性。 上述程式庫可以製作PDF文件。 使用者還必須對他們所使用的腳本有一定的了解。

隨著IronPDF在基於JavaScript的框架和程式庫的簡單整合過程、出色的IronPDF Documentation for Node.js和範例程式碼範例，以及響應的技術支援，開發者可以迅速啟動並運行，使其成為生成和列印專業級PDF的Node.js相關應用程式的首選。

IronPDF提供Node.js的免費試用版，因此在做出明智決定之前，您可以測試其完整功能。 此外，它也適用於其他語言比如C# .NET、Java和Python。 存取IronPDF網站獲取更多詳細資訊。 從IronPDF Node.js下載頁面下載IronPDF for Node.js。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant擁有邁阿密大學的電腦科學學士學位，並在Iron Software擔任全端WebOps行銷工程師。從小就對程式設計有興趣，他認為計算既神秘又易於理解，成為創意和問題解決的完美媒介。

在Iron Software，Darrius喜歡創造新事物並簡化複雜的概念，使其更易於理解。作為我們的常駐開發人員之一，他還志願教學，將他的專業知識傳授給下一代。

對Darrius來說，他的工作是有意義的，因為它有價值且對社會有真正的影響。

相關文章

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

Iron 支援團隊

我們線上24小時，每週5天。
聊天
電子郵件
給我打電話