您的位置：首页 > Web前端 > HTML

使用 PrintArea 打印 HTML 页面的内容

2016-03-24 19:57 453 查看
【本例效果】



点击“打印”按钮后，浏览器会弹出新窗口打印表格，如下图：



【实现步骤】

1. 下载 PrintArea 库，在页面中导入相应的 jQuery 库：
<!-- 导入 jQuery -->
<script src="js/jquery-1.12.2.min.js"></script>
<!-- 导入 PrintArea -->
<script src="js/jquery.PrintArea.js"></script>
2. 为“打印”按钮绑定点击事件：

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html jquery
相关文章推荐
新的分享
章节导航