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

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

# windos 2024-04-03 10:33 0 220 来源：数据天堂

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