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