有时候我们需要点击打印按钮打印网页中的局部内容，比如表格数据，这时候可以借用一段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>
相关推荐
它允许开发者选择要打印的DOM元素，避免了整个页面被打印的情况，实现了局部打印。使用该插件，可以避免不必要的页眉、页脚和广告等内容出现在打印输出中。 2. **插件的使用**： - **引入资源**：首先，在HTML文件...
"jquery局部打印"是jQuery的一个扩展功能，它允许用户在不离开当前页面的情况下，选择性地打印网页的特定部分。这个功能对于那些希望提供用户友好打印体验的网站来说非常有用，例如，可能只想让用户打印特定表格或...
总结来说，`jQuery.PrintArea`是一款实用的网页打印插件，它基于`jQuery`库，提供局部打印功能，适用于那些需要对网页内容进行精确控制打印的场合。通过简单的API调用，开发者可以轻松地集成到自己的项目中，提高...
本压缩包"jQuery网页局部打印代码.zip"包含了一个实现局部打印的示例代码，对于那些希望在不打印整个页面的情况下，仅打印网页特定区域的开发者来说，这是一个非常实用的工具。 首先，了解jQuery的基本概念是必要的...
这个插件是jQuery库的一个扩展，它通过便捷的事件调用函数来触发打印操作，极大地简化了开发者的工作。 首先，我们来看一下`jquery.jqprint-0.3@wcb.js`这个核心文件。它是jQuery.jqprint插件的主要实现部分，包含...
该插件主要针对那些需要局部打印的场景，比如打印某个div、表格或者图片等特定内容，避免了整个页面一起被打印的麻烦。jqPrint插件的核心优点在于其简单易用，只需少量代码配置，就能快速集成到项目中。 首先，我们...
总的来说，jQuery PrintArea插件是一个强大的工具，它简化了页面局部打印的实现过程，让开发者能够更加专注于内容的呈现，而无需关心底层的打印逻辑。只要合理运用，就能为用户提供便捷的打印体验。
PrintArea插件则是基于jQuery的一个扩展，专门用于实现打印页面特定区域的功能。 ### 打印区域的概念 打印区域是指在网页上选择的一部分内容，用户只打印这部分内容，而不是整个页面。这在需要避免打印冗余信息或者...
在网页开发中，JS提供了多种方法来实现页面的打印功能，包括整体打印和局部打印。以下是对这些方法的详细说明： ### 整体打印 整体打印最简单的方式是使用JavaScript的`window.print()`函数。当你点击一个链接或者...
网页打印插件jQuery.PrintArea是前端开发者常用的工具之一，它主要针对的是网页内容的打印需求。在现代网页设计中，用户可能需要打印网页中的特定部分，而不是整个页面，这就需要一个能够实现局部打印功能的插件。...
**AJAX** 是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面。AJAX的核心是XMLHttpRequest对象，该对象在后台与服务器进行通信，而不会干扰用户的交互。通过AJAX，...
通过后台与服务器交换数据并局部更新页面，用户可以即时查看3D打印进度。 3. **JavaScript/jQuery**：作为HTML的补充，JavaScript和jQuery库用于实现动态效果和用户交互，如按钮点击事件、表单验证以及与服务器的...