信息圖標
跳過到頁腳內容
  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庫。

class="hsg-featured-snippet">

如何在JavaScript中打印PDF文件

  1. 在iframe標籤中嵌入PDF
  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>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <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>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <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。 在上面的例子中，有一個帶有來源的iframe（PDF）。 還有一個按鈕類型的輸入元素。

按鈕的onclick屬性將調用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>
    <!-- Area to be printed -->
    <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 to trigger Print.js -->
    <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>
    <!-- Area to be printed -->
    <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 to trigger Print.js -->
    <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庫，在準確性、易用性和速度方面表現突出。 它提供了生成、編輯和格式化PDF的廣泛功能，直接從HTML，URL和React中的圖像生成。 支持各種平台包括 Windows、MacOS、Linux、Docker 和雲平台，如 Azure 和 AWS，IronPDF 確保了跨平台兼容性。 其用戶友好的 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提供了廣泛的功能，以滿足開發人員的需求。

Here is an example of generating and saving a PDF document from HTML File, HTML String, and URL to preserve formatting for printing:

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代碼範例頁面。

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

3.0 結論

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

憑藉IronPDF對JavaScript構建的框架和庫的簡單集成過程，卓越的IronPDF Node.js文檔和示例代碼，以及響應迅速的技術支持，開發人員可以迅速啟動並運行，使其在Node.js相關應用中生成和打印專業級PDF的首選。

IronPDF提供Node.js的免費試用，因此您可以在做出明智決定之前先測試其完整功能。 It is also available for other languages like C# .NET, Java and Python. 更多詳情請訪問IronPDF網站。 從IronPDF Node.js下載頁面下載IronPDF for Node.js。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

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