JavaScript 視窗列印頁面按鈕

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 視窗列印頁面按鈕
Muhammad Muzammil Hussain 2023年1月30日
JavaScript
  1. HTML 中的 window.print() 函式和用法示例
  2. 用幾個步驟檢查給定的 HTML 程式碼
  3. 如何列印瀏覽器頁面
  4. 獲得相同結果的替代方法
JavaScript 視窗列印頁面按鈕

JavaScript window.print() 是一種列印網頁內容的簡單方法。它會開啟一個列印對話方塊，讓你可以選擇多個列印選項。此方法不需要任何引數，也不返回任何內容。

HTML 中的 window.print() 函式和用法示例

給定的 JavaScript 語句顯示一個列印我按鈕，然後它在我們試圖列印它的工作表中顯示該網站頁面的屬性。用於開啟列印選項對話方塊的 JavaScript 函式 window.print() 用於執行列印功能。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | Window Print() method example
    </title>
 
    <script type="text/javascript">
    </script>
 
</head>
 
<body>
 
    <h2>Hi Users Click "Print me" to open print dialog</h2>
    <form>
        <input type="button" value="Print me"
               onclick="window.print()" />
    </form>
 
</body>
<html>

在這個 HTML 頁面原始碼中，我們建立了一個表單輸入型別的按鈕，用於在單擊時呼叫任何函式。

你可以看到由單擊事件按鈕觸發的 window.print() 方法。會彈出列印對話方塊，列印網頁的內容和圖片。

使用者可以在列印盒上設定目的地、頁面、佈局、顏色和更多設定。

用幾個步驟檢查給定的 HTML 程式碼

按照這四個簡單的步驟，可以清楚地瞭解 window.onload 方法。

  • 使用記事本或任何其他文字編輯工具建立文字文件。
  • 將給定的程式碼貼上到建立的文字檔案中。
  • 使用 .html 副檔名儲存該文字檔案，並使用任何預設瀏覽器開啟它。
  • 你可以看到 Print me 按鈕。它將呼叫 window.print() 函式，該函式將彈出列印對話方塊。

如何列印瀏覽器頁面

如果你的預設瀏覽器不支援上述功能，請按照以下快速步驟訪問列印選項。

  • 單擊瀏覽器的選項 » 列印 » 單擊確定。
  • 你還可以按快捷鍵 Ctrl+P 按鈕訪問列印選項。

獲得相同結果的替代方法

你還可以使用另一個功能訪問列印對話方塊選項：

document.execCommand('print');

只需使用 document.execCommand('print'); 而不是使用 window.print() 函式。它的工作原理與 window.print() 方法相同。