PDF 工具

如何在 JavaScript 中列印 PDF 文件

Name: IronPDF
Brand: Iron Software
Availability: InStock

里根普恩

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傳遞給printable屬性
5. 通過使用Print方法，在.NET C#中使用替代函式庫進行列印

2.0 程式庫

考慮到我們希望客戶能夠下載和列印我們的發票副本的情況。我們需要這份發票能夠準確且合適地列印出來。在這裡，我們將更深入地了解一些可用於將此發票從HTML文件格式轉換為PDF的多個庫。

2.1 純 JavaScript 代碼

通常，要列印 PDF 檔案的內容，我們會將其下載到電腦，開啟後選擇列印選項。另一方面，JavaScript 使得直接從網頁列印 PDF 檔案變得簡單。您只需要在網站上加入一個 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。在上述範例中，有一個具有來源（PDF）的 iframe。還有一個按鈕類型的輸入元素。

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

如何在 JavaScript 中列印 PDF 檔案：圖 1 - 列印

2.2 打印.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。 IronPDF 支援多個平台，包括 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";

(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");
})();

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 相關任務的更多程式碼範例，請造訪此IronPDF for Node.js 程式碼範例頁面。

如何在 JavaScript 中列印 PDF 檔案：圖 3 - IronPDF

3.0 結論

使用者可以看到上面的 JavaScript 代碼，但可能會被他人濫用。以這種方式使用源代碼是可行的。此外，在網站上添加危害通過該網站傳輸的數據安全的代碼並不困難。上述 JavaScript 庫在不同的瀏覽器中有不同的視圖。因此，程式碼在釋出之前必須在各種系統上運行。由於某些新功能不被舊版瀏覽器支援，我們也需要檢查這些功能的瀏覽器相容性。上述程式庫可生成 PDF 文件。使用者也必須對他們正在使用的腳本有一定的熟悉程度。

IronPDF 具有簡單明瞭的整合過程，可用於以 JavaScript 建立的框架和庫，並提供完善的IronPDF Node.js 說明文件和範例程式碼，以及快速回應的技術支援，開發人員可以迅速開始運作，使其成為在 Node.js 相關應用程式中生成和列印專業級 PDF 的首選。

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

里根普恩

立即與工程團隊聊天

軟體工程師

Regan 畢業於雷丁大學，擁有電子工程學士學位。在加入 Iron Software 之前，他的工作角色讓他專注於單一任務；而他在 Iron Software 工作中最喜歡的是他所能承擔的工作範圍，無論是增加銷售價值、技術支持、產品開發或市場營銷。他喜歡了解開發人員如何使用 Iron Software 庫，並利用這些知識不斷改進文檔和開發產品。

< 上一頁
如何使用 JavaScript 生成 PDF 文件

下一個 >
如何在 React 中將 HTML 轉換為 PDF（開發者教程）