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

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

<!DOCTYPE HTML>

<html>

    <head>

        <title>div print</title>

        <meta charset="UTF-8"/>

    </head>

    <body>

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

        <input name="b_print" type="button"  onclick="doPrint();" value=" Print" />

        <div id="print">

            <h1 style="Color:Red">The Div content which you want to print</h1>

        </div>

        <p>Other content you wouldn't like to print //Other content you wouldn't like to print</p>

        <script>

            function doPrint() {

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

                document.body.innerHTML = printData;

                window.print();

            }

        </script>

    </body>

</html>

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

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>督导报告</title>

        <link rel="stylesheet" type="text/css" href="css/jihe-page.css" />

        <style media="print">

            .btn {

                display: none;

            }

        </style>

    </head>

    <body>

        <div class="councilor-table">

            <div class="councilor-table-main1">

                <h4>督导报告</h4>

                <span id="close-icon">X</span>

            </div>

            <div class="councilor-table-main2">

                <div class="table-div1">

                    <h5>督导意见</h5>

                    <ul>

                        <li><span>督导任务名称</span><span>XXX</span></li>

                        <li><span>活动关联门店总数：</span><span>50</span></li>

                        <li><span>已执行门店数：</span><span>30</span></li>

                    </ul>

                </div>

                <div class="table-div2">

                    <h5>多次督导数据汇总</h5>

                    <table border="1" cellspacing="0" cellpadding="0">

                        <thead>

                            <tr>

                                <td>督导任务编码</td>

                                <td>督导任务内容</td>

                                <td>督导时间</td>

                                <td>门店督导数</td>

                                <td>不合要求门店数</td>

                                <td>虚假执行门店数</td>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                            </tr>

                            <tr>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                                <td>1</td>

                            </tr>

                        </tbody>

                    </table>

                    <table border="1" cellspacing="0" cellpadding="0">

                        <thead>

                            <tr>

                                <td>督导人员</td>

                                <td>督导任务编码</td>

                                <td>督导意见</td>

                                <td>原因描述</td>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td width="10%">1</td>

                                <td width="16%">1</td>

                                <td width="32%">1</td>

                                <td width="32%">1</td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

            <div class="councilor-table-main3">

                <h5>督导报告</h5>

                <ul>

                    <li>

                        <span>活动执行是否合格：</span>

                        <label id="label-radio1"><input type="radio" name="radio" />是</label>

                        <label id="label-radio2"><input type="radio" name="radio" />否</label>

                    </li>

                    <li class="label-radio1-main"><span class="textarea-span">原因描述：</span><textarea readonly="readonly" rows="5" cols="60"></textarea></li>

                    <div class="label-radio2-main">

                        <li><span class="textarea-span">督导意见：</span><textarea readonly="readonly" rows="5" cols="60"></textarea></li>

                        <li><span class="textarea-span">整改意见：</span><textarea readonly="readonly" rows="5" cols="60"></textarea></li>

                    </div>

                </ul>

                <div class="table-div3">

                    <button>取消</button><button>提交报告</button><button class="btn" onclick="doPrint();">打印</button>

                </div>

            </div>

        </div>

        <script>

            function doPrint() {

                window.print();

            }

        </script>

    </body>

</html>

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

　　

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

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

　<style media="print">

　　.btn{

　　　　display:none;

　　}

　　</style>

　　触发打印事件后，.btn就隐藏了

控制页面打印的2种方法（css3的media媒体查询和window.print()）的更多相关文章

  1. css3的@media媒体查询

    css3新功能,根据屏幕大小进行识别. 参考: http://www.runoob.com/cssref/css3-pr-mediaquery.html

  2. YbSoftwareFactory 代码生成插件【二十五】：Razor视图中以全局方式调用后台方法输出页面代码的三种方法

    上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

  3. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  4. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  5. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

  6. js刷新页面有哪几种方法

    js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

  7. 09 Flutter底部Tab切换保持页面状态的几种方法

    IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...

  8. Python+Selenium自动化-定位页面元素的八种方法

    Python+Selenium自动化-定位页面元素的八种方法   本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子. 0.元素定位方法主要有: id定位:find_elemen ...

  9. CSS3 media媒体查询器的使用方法

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...

随机推荐

  1. 基于IDEA工具 lombok 的使用

    一.简介 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的. 二.lombok的添加和常用注解 ...

  2. 面试简单整理之mybatis

    125.mybatis 中 #{}和 ${}的区别是什么? 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解 ...

  3. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  4. 第一章 odoo的配置(centos7 版)

    一: 简述 (1) odoo是python开发的一款erp软件,目前的最新版本为odoo 11, 支持Python2和Python3, 但odoo 11目测是一个过渡版本,为了稳定,我们还是上odoo ...

  5. JS生成URL二维码

    需求:项目中需要在UI界面有一个二维码,扫码后可以跳转到二维码包含的URL. 解决方案:在前端用js生成一个包含URL等信息的二维码. 实现: 方案一. <!DOCTYPE HTML PUBLI ...

  6. CentOS7安装特定版本的Docker

    查询可用版本 [root@bogon ~]# yum list docker-ce --showduplicates | sort -r 查询结果 * updates: centos.ustc.edu ...

  7. 【Selenium】【BugList1】调用firefox浏览器，报 TypeError: 'module' object is not callable

    #coding=utf-8 from selenium import webdriver driver=webdriver.firefox() 解决方法:firefox改为Firefox

  8. k8s初始化搭建方法

    http://www.cnblogs.com/cocowool/p/kubeadm_install_kubernetes.html https://www.kubernetes.org.cn/doc- ...

  9. excle记录

    比较两列不一样的数据 https://jingyan.baidu.com/article/fd8044fa23eef05030137a66.html

  10. MySQL系统变量 sql_mode 详解

    转载自:http://tech.it168.com/a2012/0822/1388/000001388401_all.shtml MySQL数据类型:SQL_MODE设置不容忽视 SQL_MODE可能 ...