跳過到頁腳內容
  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比以往任何時候都容易。

要為專案選擇理想的程式庫，需要權衡包括構建、閱讀和轉換功能在內的多個因素。
在本教程中，我們將介紹各種用於生成PDF的JavaScript程式庫。 我們將分析JS程式庫和現實世界的應用場景，重點關注三個主要點：

  • 執行環境配置
  • 促進打字和自訂字體的模組
  • 使用便利性

閱讀完後，您將能夠為您的JavaScript應用選擇理想的PDF程式庫。 最後，我們還將介紹IronPDF，一個有用且高效的PDF程式庫。

## 如何在JavaScript中打印PDF文件
  1. 嵌入PDF到iframe標籤中
  2. 訪問iframe的PDF查看器自帶的打印選項
  3. 使用JavaScript打印當前頁面的PDF
  4. 調用`printJS`方法，並將元素ID傳遞給可打印屬性
  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等雲平台，各種平台的兼容性得以保證。 其用戶友好的API允許開發人員快速將PDF生成和操作整合到Node.js專案中。

IronPDF for Node.js 的主要功能：

  • 多功能 PDF 生成：使用 IronPDF，開發人員可以從各種來源生成 PDF，包括 HTML、CSS、JavaScript、圖像和其他文件類型。這種靈活性使得創建動態和視覺上吸引人的 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相關任務的更多代碼示例，請訪問此Node.js的IronPDF代碼示例頁面。

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

3.0 結論

用戶可以看到上面的JavaScript代碼，但可能會被其他人濫用。 這種方式可以使用源代碼。 此外，向網站添加代碼以危害通過它傳送的數據的安全性並不困難。 不同的瀏覽器對上述JavaScript程式庫的看法不同。 因此，代碼必須在各種系統上運行後才能發布。 由於一些新功能不被舊瀏覽器支持，因此我們還需要查看瀏覽器的兼容性。 上述的程式庫可以生成PDF文件。 用戶還必須對他們使用的腳本有所熟悉。

IronPDF的簡單集成流程適用於由JavaScript構建的框架和程式庫，卓越的IronPDF Documentation for Node.js和示例代碼，以及響應迅速的技術支援，開發人員可以迅速上手，這使得它成為在Node.js相關應用中生成和打印專業級PDF文件的首選。

IronPDF提供Node.js的免費試用，因此您可以在做出決定前測試其完整功能。 它也適用於像C# .NET、Java和Python等其他語言。 訪問IronPDF網站以獲取更多詳情。 從IronPDF Node.js下載頁面下載Node.js的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