CSS 列印

CSS 列印涉及使用特定的 CSS 規則和屬性來控制網頁在列印時的格式。通常，對於任何可列印的網頁版本，樣式都將使用淺色。因為黑色、紅色等深色會消耗印表機更多的墨水。在本教程中，我們將學習如何使用 CSS 設計一個列印友好的網頁。

列印友好頁面的樣式

以下是可用於建立列印友好頁面的關鍵樣式

簡化佈局： 透過將display 設定為 none，移除不必要的元素，例如側邊欄、導航選單、廣告部分和互動式內容。
移除背景顏色： 建議移除背景顏色（或設定淺色）並將文字顏色設定為黑色，以節省墨水。
調整字型大小和樣式： 使用易於閱讀的字型大小和樣式，通常是更大、更清晰的字型，例如襯線字型。
顯示連結的 URL： 列印包含超連結的頁面時，不會顯示該連結的確切 URL。因此，您需要在列印版本中用確切的連結替換它。
管理分頁符： 確保控制內容在頁面間的斷開位置，避免將重要的部分或標題拆分到不同的頁面。

我們可以透過多種方式為頁面的列印版本設定樣式。我們可以為列印版本顯式宣告一個外部樣式表，或者可以在內部樣式表中使用媒體查詢。讓我們來看看。

使用列印樣式表

您可以為列印需求顯式地建立一個外部樣式表，並將其連結到您的程式碼。您只需要將media 屬性的值設定為連結標籤的“print”。將以下標籤新增到 HTML 文件的 head 部分。

<link href="/path/to/print.css" media="print" rel="stylesheet" />

print.css 將如下所示

body{
    background-color: white;
    color: black;
}
.navbar{
    display: none;
}

使用媒體查詢和 @page

CSS 媒體查詢 可用於在內部樣式表中本身設定列印版本的樣式。

@media print {
    body{
        background-color: white;
        color: black;
    }
    .navbar{
        display: none;
    }
}

CSS @page 規則用於控制列印內容的大小、方向和邊距等方面。這對於為所有列印頁面設定一致的頁面大小和邊距以及建立具有特定頁面佈局的小冊子或文件很有用。

@page {
    size: A4 portrait; /* A4 size, portrait orientation */
    margin: 2cm; /* 2cm margins on all sides */
}

/* First page has different styling */
@page :first {
    margin: 5cm; 
}

讓我們來看這兩個的例子。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            background-color: black;
            color: white;
            padding: 10px;
        }
        @media print {
            body { 
                background-color: white;
                color: black;
                padding: 10px;
            }
        }
        @page {
            size: A4 portrait; 
            margin: 2cm; 
        }
        button {
            background-color: aqua;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3> Tutorialspoint </h3>
    <p>CSS Media Type - Print</p>
    <p>
        Background is white for printable version of this page.
        Check out...
    </p>

    <button onclick="printPage()">Print Page</button>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

檢測列印請求

瀏覽器會觸發“beforeprint”和“afterprint”事件來識別何時要進行列印或列印剛剛完成。您可以使用這些事件來修改列印過程中的使用者介面，例如在列印時顯示或隱藏特定元素，或者甚至在列印後更改樣式。

<script>
    window.addEventListener("afterprint", () => self.close);   
</script>

上述宣告將在列印其內容後自動關閉當前視窗。讓我們來看一個例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        button{
            background-color: green; 
            color: white; 
            font-size: 1em;
        }
        @media screen {
            h2 {
                font-size: large;
                font-family: sans-serif;
                color: blue;
                font-style: normal;
            }
        }

        @media print {
            h2 {
                font-family: cursive;
                font-style: italic;
                color: red;
            }
        }

        @media print {
            button {display: none;}
        }
    </style>
</head>

<body>
    <article>
        <section>
        <h2>Header1</h2>
        <p>
            Section one
        </p>
        </section>
    </article>
    <button >Print</button>
    <script>
        const button = document.querySelector("button");

        button.addEventListener("click", () => {
        window.print();
        });

        window.addEventListener("afterprint", () => self.close);
    </script>
</body>

</html>

列印頁面

CSS 列印

目錄

列印友好頁面的樣式

使用列印樣式表

使用媒體查詢和 @page

示例

檢測列印請求

示例