【本例效果】
點擊“打印”按鈕後，瀏覽器會彈出新窗口打印表格，如下圖：
【實現步驟】
1. 下載 PrintArea 庫，在頁面中導入相應的 jQuery 庫：
<!-- 導入 jQuery -->
<script src="js/jquery-1.12.2.min.js"></script>
<!-- 導入 PrintArea -->
<script src="js/jquery.PrintArea.js"></script><script type="text/javascript">
$(document).ready(function(){
// 綁定“打印”按鈕的點擊事件，"test123" 爲“打印”按鈕的 class 屬性值；
$(".test123").click(function () {
// 打印 class 爲 print123 的節點；
$(".print123").printArea();
});
});
</script>搞定！
【附頁面完整代碼】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>打印頁面示例</title>
<!-- 導入 jQuery -->
<script src="js/jquery-1.12.2.min.js"></script>
<!-- 導入 PrintArea -->
<script src="js/jquery.PrintArea.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 綁定打印按鈕的點擊事件；
$(".test123").click(function () {
// 打印 class 爲 print123 的節點；
$(".print123").printArea();
});
});
</script>
</head>
<body>
<h1>你好，世界！</h1>
<div class="print123">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</div>
<button type="button" class="test123">
打印
</button>
</body>
</html>