用CSS @media print 設定哪些要列印的資訊

如果要列印網頁但有些資訊不想顯示，或是需要使用不同的呈現方式，CSS 有針對列印的相關設定。

比如這段 html 說 A. 要顯示在網頁上但列印時不要出現，B. 則是列印要出現。

<div style="text-align: center; font-size: 24pt;">
    <h1>Hello World</h1>
    This is my print page.

    <div class="no-print">
        A.列印不要印出這行
    </div>

    <div class="print-template">
        B.列印要出現這行
    </div>
</div>

css 可以這樣設定

• print-template：列印時顯示、網頁不顯示
• no-print：列印時不顯示、網頁顯示

.print-template {
    display: none;
}

@media print {
    .print-template {
        display: block;
    }

    .no-print {
        display: none;
    }
}

網頁顯示結果

預覽列印結果