在实际开发中，有时可能会有打印的需求。下面我总结了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. 视频剪辑软件原型-videocut

    制作软件:墨刀 分享网址:<iframe src="https://modao.cc/app/fb0e31590711295ebebdf50fff7dd9861b7a9c1d/embe ...

  2. 从本地上传项目到 github 以及从github 下载项目到本地环境

    前置条件:成功安装github,安装成功后,要配置密钥,不然上传不成功,要报错 具体上传步骤: git init   //初始化 git add  文件名  //更新文件 git commit -m ...

  3. 人脸识别1：n对比 （二）

    本项目采用了百度AI 人脸识别 第三方接口,实现了自选本地手机相册图片上传人脸(faceSet中添加人脸) 和 自选本地手机相册图片寻找出集合中相似度最高的一个face,可返回比对相似度.位置等信息. ...

  4. linux学习第十九天 (Linux就该这么学)　结课了

    今天最后一天课程了,结课了,还有点舍不得那,在些也祝 李老师 事业蒸蒸日上,超来超好, 今天内容是部署了 LNMP 部署动态网站环境(linux  +nginx+mysql+php) 安装文件挺别多, ...

  5. 使用WinMerge作为git的Merge工具

    使用WinMerge作为git的Merge工具 我比较喜欢使用免费的WinMerge作为diff和merge工具,虽然TortoiseGit也自己带了TortoiseGitMerge工具,但是使用起来 ...

  6. 文件扩展关联命令(assoc)

    assoc 命令: // 描述: (association) --> 联想.关联 显示或修改文件扩展名关联. 如果在没有参数的情况下使用,assoc将显示所有当前文件扩展名关联的列表. // 语 ...

  7. java34

    局部内部类:定义在方法中的类 -1局部类中可引用局部变量(定义在方法中的变量),但是局部变量必须已经初始化, 因为局部变量前默认带着final. 2.局部内部类的东西只能在定义的方法中使用(在方法中创 ...

  8. IMDb、烂番茄、MTC、各种电影行业评分名字整理

    这篇不是技术文章,就是对总是看到但是不知道具体是什么的一些电影名词.评分.来源,学习一下. IMDb 互联网电影资料库(Internet Movie Database,简称IMDb)是一个关于电影演员 ...

  9. python操作Redis安装、支持存储类型、普通连接、连接池

    一.python操作redis安装和支持存储类型 安装redis模块 pip3 install redis 二.Python操作Redis之普通连接 redis-py提供两个类Redis和Strict ...

  10. 将preg_replace()改写为preg_replace_callback()

    preg_replace()函数使用/e修饰符可能带来安全隐患,PHP5.5之后,该用法被抛弃使用,升级为preg_replace_callback().在新版本下运行老版本的代码,会出现错误,如: ...