[CSS]如何讓別人無法列印你的網頁,簡單一行CSS搞定

how to prevent user print your web page using CSS
 
做網站的時候,面對不同的網頁內容,或是不同的對象,
總是有一些特殊需求,
像是好比說我們最常看到的就是不讓使用者按滑鼠右鍵,
或是不讓使用者選取內容文字(以避免複製之類的行為),
也有些時候,我們會希望某些網頁甚至整個網站,
都不要讓別人可以列印出來,
那要如何讓別人無法列印你的網頁呢?
 
這個方法相當簡單,就用短短一行 CSS 就可以做到,
下面我們分別以幾個不同情況個案來說明。
 

如何讓某單一頁面無法被列印


如果我們是希望某個單一頁面無法被列印,
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內),
加入下面的CSS碼:
<style type="text/css">
@media print { body { display:none } }
</style>

上面這個CSS的語法 @media print 的部分,
就是對瀏覽器宣告說,
接下來的CSS指令是針對列印的時後才有效喔,
其他像是正常瀏覽時,這個指令就忽略。
 
@media print 後面包裹的語法: body{display:none}
就很容易理解了,就是內文全部隱藏(不顯示),
這樣在任何人列印的時候,這個網頁就是空白一片了。
 

如何讓整個網站都無法被列印


另一個情況則是如果我們要整個網站都不讓人列印的話,
語法也是一樣的,
差別在如果要每一頁都加上這個CSS語法,
有點麻煩,很沒有效率,
最好是直接在全站的CSS文件中的任何地方,
加上:

@media print { body { display:none } }

這樣就可以了,
前後CSS語法的差別,
僅僅在於有沒有 <style type="text/css"></style> 這段描述,
因為這個語法直接放到 CSS 文件裡面的話,
就不需要再額外標示這個標籤了。
 

如何讓頁面中僅某些部分無法被列印


喔,還有第三種情況,
就是如果我們希望一個頁面中,僅有部分的內容不要被列印的話,
那怎麼做呢?
 
邏輯跟語法基本上是一樣的。
 
舉例來說,
我們希望網頁中不要被列印的有三個區塊,
分別是 <div id=a></div>, <div id=b></div> 以及 <div id=c></div>
那麼就在那三個區塊加上一個 CSS 的類別 class,
這裡我們先暫時取名字就叫做:do_not_print_this
加上去就像下面這樣:
<div id=a class="do_not_print_this"></div>,
<div id=b class="do_not_print_this"></div>,
<div id=c class="do_not_print_this"></div>
之後,
就如先前提到的語法,
把原本的 body{display:none}
改為 .do_not_print_this{display:none}
這樣就可以了 ^^

@media print { .do_not_print_this{display:none} }

 
大家也可以直接列印這篇文章,
看看是不是空白的呢(用預覽列印就可以知道了,可別真的印出來浪費一張紙喔)?
 
試試看吧!