首先，我們理解列印的過程，控制頁面列印有很多種方法，這裡我只講最簡單的一種。

列印分三步：

列印前，列印 和 列印後。

過濾的原理其實很簡單，就是列印前 將不該顯示的元素 全部display = none

然後列印後，再將頁面修改回來。

廢話不多說：

① 我們首先要註冊兩個函式

window.onbeforeprint=beforePrint; 
window.onafterprint=afterPrint; 

//列印之前隱藏不想打印出來的資訊 
function beforePrint(){
   
   $('.navbar').hide();  //隱藏頭部
   $('#page-header').hide(); //隱藏麵包屑
   $('#block-region-side-pre').hide(); //隱藏左側導航欄
  
   

} 
//列印之後將隱藏掉的資訊再顯示出來 
function afterPrint(){ 
  
   $('.navbar').show();  //顯示頭部
   $('#page-header').show(); //顯示麵包屑
   $('#block-region-side-pre').show(); //顯示左側導航欄
 

}

③給dom元素註冊列印事件，要包含三個函式，順序不能亂。

<button id="myprint" onclick="beforePrint();window.print();afterPrint();">列印</button>

可是問題又來了。

我的頁面頂部 出現了 title的內容 和 網址，底部也出現了不該出現的東西，怎麼辦？

用js程式可以解決嗎，可以，只是相容性很差，你可以百度搜索“js去掉列印頁首和頁尾”，你會發現，他會去呼叫ActiveX控制元件和windows登錄檔，Linux和其他作業系統有嗎？Firefox會自動給你安裝ActiveX控制元件嗎？

答案是否定的。

你幹嘛那麼懶呢？一步配置瀏覽器就好了，如下：

看看谷歌：不勾選 頁首和頁尾

看看火狐：所有的都選擇空白

其他瀏覽器，當然如出一轍。