在实际开发中，有时可能会有打印的需求。下面我总结了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. python课程安排

    作为最流行的脚本语言之一,python具有内置的高级数据结构和简单面向对象编程思想实现.同时,其语法简洁而清晰,类库丰富而强大,非常适合进行快速原型开发.另外,python可以运行在多种系统平台下,从 ...

  2. Numpy安装

    Python官网上的发行版是不包含Numpy模块的. 1.使用已有的发起行版本 对于许多用户,尤其是在Windows上,最简单的方法就是下载以下的Python发行版,他们包涵了所有的关键包(包括Num ...

  3. Java 字符编码（三）Reader 中的编解码

    Java 字符编码(三)Reader 中的编解码 我们知道 BufferedReader 可以将字节流转化为字符流,那它是如何编解码的呢? try (BufferedReader reader = n ...

  4. 【MySQL】初识数据库及简单操作

    一.数据库概述 1.1 什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机. ...

  5. 【转】【完全开源】微信客户端.NET版

    [转][完全开源]微信客户端.NET版 目录 说明 功能 原理步骤 一些参考 说明 前两天比较闲,研究了一下web版微信.因为之前看过一篇博客讲微信web协议的,后来尝试分析了一下,半途中发现其实没什 ...

  6. 阿里oss图片上传

    <script type="text/javascript" src="../../static/js/manage/oss_uploader.js"&g ...

  7. 【js jQuery】map集合 循环迭代取值---以及 map、json对象、list、array循环迭代的方法和区别

    后台给前台传来一个map @ResponseBody @RequestMapping(value = "getSys") public Map<Long,String> ...

  8. JAVA 8 主要新特性 ----------------(七)新时间日期 API ----- Duration “时间”间隔

    Duration:用于计算两个“时间”间隔 简介: 用法: 1.Zero常量 实例: Duration duration = Duration.ZERO; System.out.println(&qu ...

  9. AlphaGo原理浅析

    一.PolicyNetwork(走棋网络) 首先来讲一下走棋网络.我们都知道,围棋的棋盘上有19条纵横交错的线总共构成361个交叉点,状态空间非常大,是不可能用暴力穷举的方式来模拟下棋的.但是我们可以 ...

  10. Ubuntu18.04安装Guake下拉式终端

    Guake的优势是方便,可以很迅速的唤起与隐藏,已经成为我所需终端的主力. 安装方式:sudo apt-get install guake bug修复:使用时输入exit命令会导致终端卡死系统报错,同 ...