在实际开发过程当中,用户需要打印当前页面的内容,比如说在教育系统中,教师组卷成功之后,要把这套试卷打印下发给学生,通过JavaScript可以轻松实现打印功能,代码如下:
CSS部分:
*{margin:0; padding:0;}
td{height:30px;line-height:30px;text-align:center;padding:0 10px;border:1px solid #ccc;}
.clear{width:100%;height:100%;position:fixed;z-index:99;background-color:rgba(0,0,0,0.5);display:none;}
#list{width:500px;overflow:auto;padding:10px;background-color:#fff;position:fixed;left:50%;margin-left:-250px;top:30%;z-index:100;display:none;}
a{width:100px;height:30px;display:block;background-color:#ccc;text-align:center;line-height:30px;color:#fff;clear:both;}
HTML部分:
<div class=”clear”></div>
<div id=”list”>
<div id=”printContent”>
<table cellpadding=”0″ cellspacing=”0″>
<thead>
<tr>
<td>ID</td>
<td>用户名</td>
<td>QQ</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>赵一鸣</td>
<td>1047832475</td>
</tr>
</tbody>
</table>
</div>
<a href=”javascript:;” onclick=”startPrint();”>开始打印</a>
</div>
<a href=”javascript:;” onclick=”showPrintContent();”>打印</a>
JavaScript部分:
//显示打印内容
function showPrintContent(){
document.getElementsByClassName(‘clear’)[0].style.display = ‘block’;
document.getElementById(‘list’).style.display = ‘block’;
}
//开始打印
function startPrint(){
//指定打印区域
document.body.innerHTML = document.getElementById(‘printContent’).innerHTML;
window.print();
}
将以上代码复制到html页面中,即可看到效果!