js实现网页的过滤打印（去掉你不想出现的内容）

末蓝、 2022-08-13 11:47 988阅读 0赞

首先，我们理解打印的过程，控制页面打印有很多种方法，这里我只讲最简单的一种。

打印分三步：

打印前，打印 和 打印后。

过滤的原理其实很简单，就是打印前 将不该显示的元素 全部display = none

然后打印后，再将页面修改回来。

废话不多说：

① 我们首先要注册两个函数

window.οnbefοreprint=beforePrint; 
    window.οnafterprint=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元素注册打印事件，要包含三个函数，顺序不能乱。

至此，点击“打印” 按钮，即可过滤掉你不想要的页面元素了。

可是问题又来了。

我的页面顶部 出现了 title的内容 和 网址，底部也出现了不该出现的东西，怎么办？

用js程序可以解决吗，可以，只是兼容性很差，你可以百度搜索“js去掉打印页眉和页脚”，你会发现，他会去调用ActiveX控件和windows注册表，Linux和其他操作系统有吗？Firefox会自动给你安装ActiveX控件吗？

答案是否定的。

你干嘛那么懒呢？一步配置浏览器就好了，如下：

看看谷歌：![SouthEast][]不勾选 页眉和页脚

看看火狐：![SouthEast 1][]所有的都选择空白

其他浏览器，当然如出一辙。

[SouthEast]: /images/20220810/8388407d648d42a489ec3aecdee0d7f1.png
[SouthEast 1]: /images/20220810/e8b56b1b91da4de29e90fe79072c9d9a.png