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 或能夠動態建立一個，添加文件並列印即可。我將示範如何使用 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 打印.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 提供廣泛的功能以滿足開發人員的需求。
下面是從生成和儲存PDF文件的示例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");
})();

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

如何在 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 for Node.jsIronPDF Node.js 下載頁面.

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

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