JavaScript 視窗列印頁面按鈕

Muhammad Muzammil Hussain 2023年1月30日 2022年5月11日
  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() 方法相同。