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