JavaScript - 頁面列印

上一頁
下一頁

很多時候，您可能希望在網頁上放置一個按鈕，以便透過實際印表機列印該網頁的內容。JavaScript 透過使用window物件的print函式幫助您實現此功能。

JavaScript print 函式window.print()在執行時會列印當前網頁。您可以使用onclick事件直接呼叫此函式，如下例所示。

示例

嘗試以下示例。

<html>
   <head>      
      <script type = "text/javascript">
         <!--
         //-->
      </script>
   </head>
   
   <body>      
      <form>
         <input type = "button" value = "Print" onclick = "window.print()" />
      </form>   
   </body>
<html>

雖然它滿足了獲取列印輸出的目的，但這不是推薦的方式。一個列印友好的頁面實際上只是一個包含文字的頁面，沒有影像、圖形或廣告。

您可以透過以下方式使頁面列印友好 -

  • 複製頁面並省略不需要的文字和圖形，然後從原始頁面連結到該列印友好的頁面。檢視示例。

  • 如果您不想保留頁面的額外副本，則可以使用適當的註釋標記可列印文字，例如<!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE -->，然後您可以使用 PERL 或任何其他後臺指令碼清除可列印文字並顯示以進行最終列印。我們在 Tutorialspoint 使用此方法為我們的網站訪問者提供列印功能。

示例

建立一個帶有 onclick 事件的按鈕，該事件附加到 printpage() 方法，並且當我們想要列印頁面時應觸發該方法。

當用戶點選按鈕時，將呼叫 printpage() 方法（在 script 標籤中），該方法可能包含一些幫助列印頁面的程式碼。

<html>
   <head>
      <title>Print Page</title>
      <script>
         function printpage() {
            window.print();
         }
      </script>
   </head>
   <body>
      <h2>This is a sample page to print</h2>
      <button onclick="printpage()">Print Page</button>
   </body>
</html>

當用戶點選按鈕時，瀏覽器會開啟列印對話方塊，允許他們列印當前視窗中顯示的 HTML 文件。

以下是在使用 JavaScript 列印頁面時需要牢記的一些其他事項

  • print() 方法只會列印當前視窗的內容。如果要列印多個頁面，則需要為每個頁面呼叫 print() 方法。

  • print() 方法不會列印任何隱藏的內容。例如，如果某個元素的 style 屬性設定為“display: none”，則它不會被列印。

  • print() 方法不會列印頁面載入後動態載入的任何內容。例如，如果您使用 JavaScript 從伺服器載入影像，則該影像不會被列印。

如果需要列印更復雜的內容，例如表格或表單，則可能需要使用其他方法，例如生成 PDF 檔案或使用第三方列印庫。

如何列印頁面？

如果在網頁上找不到上述功能，則可以使用瀏覽器的標準工具欄列印網頁。按照以下連結操作。

File →  Print → Click OK  button.
列印頁面
上一頁
下一頁
廣告