1. IronPDF
  2. IronPDF 部落格
  3. Node PDF 工具
  4. Javascript 列印 PDF
PDF 工具

如何在 JavaScript 中列印 PDF 文件

發佈 2023年5月23日
分享:

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# 中打印 列印 方法

2.0 庫

考慮這樣的情景，我們希望客戶能夠下載並打印我們的發票副本。我們需要這張發票能夠準確且適當地打印出來。在這裡，我們將仔細看看一些可將該發票從HTML文件格式轉換為PDF的眾多庫。

2.1 標準 JavaScript 程式碼

通常，若要列印 PDF 檔案的內容，我們會將其下載到電腦上，打開它，然後選擇列印選項。而 JavaScript 使得直接從網頁列印 PDF 檔案變得簡單。你所需要的只是網站上的一個 iframe 或能夠動態構建的一個 iframe，添加文件並列印它。我將演示如何使用 JavaScript 列印 PDF 檔案。iframe 用於在一個網頁內顯示另一個網頁。為了顯示網頁，iframe 需要知道它的來源。

<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="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</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="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>
HTML

至於列印 PDF 文件，可以使用 iframe 顯示文件的內容，然後使用 JavaScript 列印內容。在這兩種情況下，都需要使用 iframe。在上面的例子中，有一個具有來源的 iframe (PDF). 還有一個按鈕類型的輸入元素。

按鈕的onclick屬性將調用print方法。

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

2.2 Print.js

Print.js 的主要目的是讓我們能夠從應用程式內部列印 PDF 檔案，而無需導航離開、從使用者界面匯入並列印它們或使用嵌入式技術。這適用於使用者只需要列印 PDF 檔案，而不需要開啟或下載它們的特殊情況。

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

<html>
    <head>
        <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(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
<html>
    <head>
        <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(){
                    $("#btnPrint").on("click",function(){
                        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，開發人員可以從各種來源生成PDF，包括HTML、CSS、JavaScript、圖像和其他檔案類型。這種靈活性使得可以根據特定需求創建動態和具有視覺吸引力的PDF文件。
  • 高級文件定制：IronPDF使開發人員能夠通過添加頁眉、頁腳、附件、數位簽名、水印和書籤等特性來增強PDF文件。這使得可以創建具有豐富內容和互動元素的專業級PDF。
  • 安全功能：IronPDF提供強大的安全功能，以保護PDF免受未經授權的訪問。開發人員可以實施安全措施，如密碼、數位簽名、元數據和其他安全設置，以保護PDF文件中包含的敏感資訊。
  • 優化的性能：IronPDF的設計旨在達到最佳性能，具備完全的多執行緒和異步支援。這確保了高效的PDF生成，使其適用於性能至關重要的應用程序。
  • 全面的功能集：IronPDF提供超過50種功能，用於創建、格式化和編輯PDF文件，提供了一個全面的解決方案來處理所有與PDF相關的任務。從基本的文件生成到高級自定義和安全，IronPDF提供了一系列廣泛的功能，以滿足開發人員的需求。

以下是一個從 HTML檔案, HTML 字串，和 網址 保持列印格式:

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

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

如需了解有關 PDF 任務的更多程式碼範例，請訪問此 程式碼範例 頁面。

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

3.0 結論

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

藉由 IronPDF 對 JavaScript 框架和庫的簡單集成過程，優秀 文檔 範例程式碼示例和響應技術支持，開發人員可以在短時間內啟動和運行，使其成為生成和列印專業級PDF的Node.js相關應用程序的首選。

IronPDF 提供 免費試用，因此您可以在做出明智決定之前測試其完整功能。它也適用於其他語言，如 C# .NET, Java 和 Python。造訪 IronPDF 請訪問網站以獲取更多詳情。下載 IronPDF for Node.js 來自 這裡.

< 上一頁
如何使用 JavaScript 生成 PDF 文件
下一個 >
如何在 React 中將 HTML 轉換為 PDF（開發者教程）

使用 npm 安裝

版本： 2024.9

> npm i @ironsoftware/ironpdf

報告問題

準備開始了嗎？ 版本: 2024.9 剛剛發布

免費 npm 安裝 查看許可證 >

免費獲取

30天試用序號 立即。

15天試用金鑰 立即。

bullet_checked不需要信用卡或帳戶註冊
試用表格已提交
成功。

您的試用金鑰應該在郵件中。
如果不是，請聯繫
support@ironsoftware.com

bullet_test在生产环境中测试
無浮水印
子彈日曆30天完整
功能性產品
bullet_support24/5 技術支援
試用期間支援

感謝您！

您的授權密鑰已發送到提供的電子郵件地址。聯絡我們

24小時升級優惠：

Save 50% 在一
專業 升級

去 專業 涵蓋10位開發人員
和無限專案。

小時

:

分鐘

:

秒钟

升級到專業版

升級

專業

$600 美元

$299 美元

  • 10 位開發人員
  • 10個地點
  • 10個專案
今天 唯一

5 個 .NET 產品只需 2 個價格

IronPDF IronOCR IronXL IronBarcode IronWebscraper

總套件價值：

$7,192 美元

升級價格

今天
唯一

$499 美元

24小時後

$1,098 美元