<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打印</title>
</head>
<body>
<!-- 打印测试按钮 -->
<button id="btnPrint">打印</button>
<div class="container">
<div id="printArea"><!--打印区域开始位置-->
<style>
/* 打印样式,写到这个位置printArea里面,样式才能生效 */
*{margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
html,body{font-family: "微软雅黑";}
</style>
<!--打印内容-->
<div class="">
12345
</div>
<!--打印内容结束位置-->
</div><!--打印区域结束位置-->
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.PrintArea.min.js"></script> <!--打印插件注意引入!!!!!!-->
<script type="text/javascript">
$("#btnPrint").click(function(){
$("#printArea").printArea();
});
</script>
</html>
打印插件jquery.PrintArea.min.js要引入,这个文件的内容是:
(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);