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

　　

　　在实际开发中，有时可能会有打印的需求。下面我总结了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就隐藏了