在实际开发中，有时可能会有打印的需求。下面我总结了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. MySQL索引优化步骤总结

    在项目使用mysql过程中,随着系统的运行,发现一些慢查询,在这里总结一下mysql索引优化步骤 1.开发过程优化 开发过程中对业务表中查询sql分析sql执行计划(尤其是业务流水表),主要是查看sq ...

  2. JS学习记录------JS基本指令

    对未来的恐慌,和想成为一名自由开发的梦想.让我觉得应该点亮一个新的技能:WEB前端开发. 重新学习JS以及jQuery,让我在日常code的过程中可以更得心应手,毕竟,我爱代码. 这篇文章主要记录的内 ...

  3. 201621123002《Java程序设计》第八周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 从源代码中可以看出 ...

  4. js兼容公用方法

    var utils = (function(){ //把类数组转换为数组(兼容所有的浏览器) function toArray(classAry){ var ary = []; try { ary = ...

  5. 为什么禁止在 foreach 循环里进行元素的 remove/add 操作

    首先看下边一个例子,展示了正确的做法和错误的错发: 这是为什么呢,具体原因下面进行详细说明: 1.foreach循环(Foreach loop)是计算机编程语言中的一种控制流程语句,通常用来循环遍历数 ...

  6. 真机测试没有问题，but上线后安装在手机上crash。也有无法打包的情况。

    图片格式不对,把16位or p3图片改为8位sRGB图片  9.0以前不支持 解决步骤: a.找到导出项目的ipa文件修改后缀名.ipa为.zip后直接解压该文件: b.找到出问题的图片,直接把该图片 ...

  7. Unity3D 在Update中不要过多地修改Transform 信息

    前文说到碰撞检测时候,不要在Update内部尝试移动GameObject 来检查碰撞检测,这样是徒劳无功.但是 说到 因为你移动的过程中其实并没有将实际的移动位置更新到物理引擎,只是做了个缓存而已, ...

  8. mysql 主从库同步

    #主库修改my.ini [mysqld] server log-bin=mysql-bin binlog-do-db=demo #从库修改my.ini [mysqld] server replicat ...

  9. HttpHelpers类普通GET和POST方式，带Cookie和带证书验证模式

    HttpHelpers类普通GET和POST方式,带Cookie和带证书验证模式 参考路径:https://www.cnblogs.com/splendidme/archive/2011/09/14/ ...

  10. 低版本的Chrome，打开url时，报错，IE确可以打开；

    解决办法:打开注册表,添加以下内容,之后重启服务器: [HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\HTTP\Parameters]Ena ...