有时候我们需要点击打印按钮打印网页中的局部内容,比如表格数据,这时候可以借用一段Jquery的扩展代码。
当然,打印的内容里面必须包含所有要素,比如CSS必须写在标签里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>printArea By Jquery Extend</title>
</head>
<body>
<div id="printJShtml">
<style>
.priscroll {
overflow-y: hidden;
}
.printImg {
position: relative;
max-width: 1000px;
height: 674px;
margin-top: 2%;
}
.prinImgbj {
position: absolute;
left: 0;
top: 0;
height: 674px;
}
.prinImglogo {
position: absolute;
width: 38%;
left: 31%;
top: 27%;
}
.prinImglogo img {
width: 80%;
}
.pringcont {
position: absolute;
width: 56%;
left: 23%;
bottom: 30%;
font-size: 20px;
}
.pringFoot {
position: absolute;
left: 0;
bottom: 15%;
zoom: 1;
overflow: hidden;
width: 100%;
}
.prinLeft {
float: left;
padding-left: 95px;
line-height: 30px;
font-size: 18px;
}
.prinRight {
float: right;
padding-right: 95px;
line-height: 30px;
font-size: 18px;
}
</style>
<div class="printImg">
<img src="http://fsxhht.zhongkefu.com.cn/images/beijing.jpg" class="prinImgbj">
<img src="http://fsxhht.zhongkefu.com.cn/images/logofs.png" class="prinImglogo">
<div class="pringcont">
经审核,批准 北京若泽科技有限公司
<br> 为中国建筑防水协会会员,特此证明
</div>
<div class="pringFoot">
<div class="prinLeft">
证书编号:0123456789
<br> 有 效 期: 2017年5月14日
</div>
<div class="prinRight">
中国建筑防水协会
<br> 2017年5月14日
</div>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
(function($) {
var printAreaCount = 0;
$.fn.printArea = function() {
var ele = $(this);
var idPrefix = "printArea_";
removePrintArea(idPrefix + printAreaCount);
printAreaCount++;
var iframeId = idPrefix + printAreaCount;
var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
iframe = document.createElement('IFRAME');
$(iframe).attr({
style: iframeStyle,
id: iframeId
});
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
$(document).find("link").filter(function() {
return $(this).attr("rel").toLowerCase() == "stylesheet";
}).each(
function() {
doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >');
});
doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() + '</div>');
doc.close();
var frameWindow = iframe.contentWindow;
frameWindow.close();
frameWindow.focus();
frameWindow.print();
}
var removePrintArea = function(id) {
$("iframe#" + id).remove();
};
})(jQuery);
$(function(){
$('#printJShtml').printArea();
})
</script>
</body>
</html>