在实际开发中，有时可能会有打印的需求。下面我总结了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. canvas中插入的图片 自适应 ？

    注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶  为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...

  2. MySQL函数转储存(当前月数据同步)

    BEGIN declare a1 int default 0;#第一次循环的循环变量 declare a2 int default 0; declare b1 int default 0; decla ...

  3. mr微博内容推荐

        第一次迭代 1 package com.laoxiao.mr.weibo; import java.io.StringReader; import org.apache.commons.lan ...

  4. Finance API文档

    0. 公共部分 请求url {apiRoot}/{method}?ver={version}&appkey={appkey}&sign={sign} 参数名 说明 示例 apiRoot ...

  5. python3 第二十九章 - 内置函数之tuple相关

    Python元组包含了以下内置函数 序号 方法及描述 实例 1 len(tuple)计算元组元素个数. >>> tuple1 = ('Google', 'Baidu', 'Taoba ...

  6. 《修炼之道:.NET开发要点精讲》读书笔记（四）

    委托的作用:1)它允许把方法作为参数,传递给其它的模块:2)它允许我们同时调用多个具有相同签名的方法:3)它允许我们异步调用任何方法. “方法签名”指方法的参数个数.参数类型以及返回值等,具有相同签名 ...

  7. MongoDB学习记录(四) - MongoDB的"增查改删"操作之"改"

    更新文档主要有以下几种方法: db.collection.updateOne(filter, update, options) db.collection.updateMany(filter, upd ...

  8. tensorflow学习之（八）使用dropout解决overfitting（过拟合）问题

    #使用dropout解决overfitting(过拟合)问题 #如果有dropout,在feed_dict的参数中一定要加入dropout的值 import tensorflow as tf from ...

  9. 20175316 盛茂淞 Arrays和String单元测试

    Arrays和String单元测试 具体描述: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arr ...

  10. nginx上传文件时 nginx 413 Request Entity Too Large 错误

    产生原因: 上传文件的大小超出了 Nginx 允许的最大值,默认是1M: 解决方法: 修改Nginx的配置文件(一般是:nginx/nginx.conf),在 http{} 段中增大nginx上传文件 ...