声明： 本文是我看完 jQuery 插件 jquery.PrintArea.js 后， 基本上默写出来的， 内容大致相同， 只是多加了写注释
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="div" class="haha">test</div> <button onclick="doPrint()">print</button> </body> </html>
(function($) {
// 多次调用打印时标识不同ID
var printCount = 0;
// 区域打印
$.fn.printArea = function() {
// 打印区域的目标元素
var tarEle = $(this);
var idPrefix = "printArea_";
// remove前一个打印区域iframe
removePrintArea(idPrefix + printCount);
printCount++;
var iStyle = "position:absolute;width:0px;height:0px;left:-10px;top:0px;";
var iId = idPrefix + printCount;
// 创建一个新 iframe ，并追加到body体最后面
var iframe = document.createElement("IFRAME");
$(iframe).attr({
style: iStyle,
id: iId
});
document.body.appendChild(iframe);
// 打印区域 iframe 的文档对象
var iDoc = iframe.contentWindow.document;
// 遍历当前文档中所有的 link 标签， 将这些 css 样式表写入到打印区域 iframe 文档中
$(document).find("link")
.filter(function() {
return $(this).attr("rel").toLowerCase() == "stylesheet";
})
.each(function() {
iDoc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
});
// 将打印区域目标元素内容和class属性加入到一个新 div 中， 并写入到打印区域 iframe 文档对象中
iDoc.write("<div class='" + $(tarEle).attr("class") + "'>" + $(tarEle).html() + "</div>");
iDoc.close();
// 用打印区域 iframe 子窗口对象调用print()执行打印
var iframeWindow = iframe.contentWindow;
iframeWindow.close();
iframeWindow.focus();
iframeWindow.print();
};
var removePrintArea = function(id) {
$("iframe#" + id).remove();
};
})(jQuery);
function doPrint() {
$("#div").printArea()
}
相关推荐
实现javascript打印功能，打印整个页面就很简单，但如果指定打印某一个区域就有点难点，这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件
jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。
使用jQuery控制网页打印指定的区域，可以指定一个div区域的id即可实现打印网页的部分内容，如下代码所示： <html> <head> <title>jquery 打印指定区域内容</title> [removed][removed] ...
使用CSS控制打印样式，需要设置样式media=”print”，并且将页面中不需要打印的元素的样式display属性设置为none。...用jQuery打印插件printArea.js $(function(){ $(#print_btn).click(function(){ $(#my_area).pr
$("#printbtn").click(function(){ $("#printarea").printArea();//#printarea：打印区域ID；#printbtn：按钮ID });
jqprint是一个基于jQuery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上...
打印我 参见 GIST： : 这是在 jQuery、vanilla js 等中做的一个简单的事情。
<script src="js/jquery-1.9.1.min.js"> 这里有一头猪要打一下。 ;">打印 var ps = document.getElementById('ps'); function preview(id) { var sprnhtml = $('#' + id).html(); //获取区域内容...
web端直接调用浏览器打印功能，自适应排版，可删除页眉页脚，可以自定义打印区域
PrintPage 是用于打印网页特定区域的插件。 版本： 1.0 作者： abdulkhaderp (Abdul Khader) 如何使用： 包括 jQuery ， [removed] 包括插件， [removed] 打印元素， $("#elementID").printPage(); 可选...
Print：打印 Fullscreen：切换全屏模式 About：关于xhEditor skin：皮肤风格选择 参数值：default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色),vista(Vista),nostyle(NoStyle) ...