控制页面打印的2种方法(css3的media媒体查询和window.print())


在实际开发中,有时可能会有打印的需求。下面我总结了2种打印的方法,希望对各位小伙伴有所帮助。

 

  ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo



   

       

div print

       

   


   

       

HTML Page //Other content you wouldn't like to print

       


       


           

The Div content which you want to print


       

       

Other content you wouldn't like to print //Other content you wouldn't like to print


       

            function doPrint() {

                var printData = document.getElementById("print").innerHTML; //获得 div 里的所有 html 数据

                document.body.innerHTML = printData;

                window.print();

            }

       

   



原文参考:https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html

 

  注:但是上面的方法也有一个问题,就是打印的是整个页面。有时需要打印全部,

    有时只需要打印指定部分,要隐藏某些部分。这种情况就要使用第二种方法来解决

  ②:使用CSS3的media媒体查询控制页面并做局部打印——隐藏掉不需要或不想要打印的部分。下面还是一个demo




   

       

       

督导报告

       

       

            .btn {

                display: none;

            }

       

   


   

       

           

               

督导报告

                X

           

           

               

                   

督导意见

                   

                           

  • 督导任务名称XXX
  •                        

  • 活动关联门店总数:50
  •                        

  • 已执行门店数:30
  •                    

               

               

                   

多次督导数据汇总

                   

                       

                           

                               

                               

                               

                               

                               

                               

                           

                       

                       

                           

                               

                               

                               

                               

                               

                               

                           

                           

                               

                               

                               

                               

                               

                               

                           

                       

                   

督导任务编码 督导任务内容 督导时间 门店督导数 不合要求门店数 虚假执行门店数
1 1 1 1 1 1
1 1 1 1 1 1

                   

                       

                           

                               

                               

                               

                               

                           

                       

                       

                           

                               

                               

                               

                               

                           

                       

                   

督导人员 督导任务编码 督导意见 原因描述
1 1 1 1

               

           

           

               

督导报告

               

                       

  •                         活动执行是否合格:

                           

                           

                       

  •                    

  • 原因描述:
  •                    

                           

  • 督导意见:
  •                        

  • 整改意见:
  •                    

                   

               

                   

               

           

       


       

            function doPrint() {

                window.print();

            }

       

   




 原文参考:https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html

  

  打印时,你会发现打印按钮的button已经被隐藏了。

  就是因为这里给button设置了隐藏: