在實際開發中，有時可能會有打印的需求。下面我總結了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就隱藏了