jQueryPrint 的简单使用
一、为什么要使用 jQueryPrint？
1、当然是方便的要死尼，相比于其他的方法。
2、打印整个页面或者局部页面都是非常的可以的，使用很方便。
3、如果要导出页面为 PDF 都是很好的。
4、jQuery 的打印插件很多，你可以任意选，但是要注意 jQuery 的版本以及浏览器的兼容性。
二、jQueryPrint 的简单使用
1、到 jQuery 插件官网进行下载插件。
jQuery 插件官网地址：http://www.jq22.com/，你可以搜索你想要的插件，应该差不多基本都能搜的到吧。
2、下载插件，放入项目中，如图：
3、index.jsp 页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery.Print 的用法</title>
<meta name="description" content="jQuery.print is a plugin for printing specific parts of a page">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="${pageContext.request.contextPath}/jQueryPrint/css/normalize.min.css">
<style type='text/css'>
.a {
background: black;
color: white;
} .b {
color: #aaa;
}
</style>
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/jQueryPrint/js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
<![endif]-->
<script src="${pageContext.request.contextPath}/js/jquery-2.2.4.min.js"></script>
<script
src="${pageContext.request.contextPath}/jQueryPrint/jQuery.print.js"></script>
</head>
<body>
<h3 style="text-align: center;">
<span> jQuery.print</span>
</h3>
<div id="content_holder">
<div id="ele1" class="a">
<h3>段落一</h3>
<p>
这是第一个段落，文本输入框的内容也会被打印出来，不信你试试看！！！ <input type="text" placeholder="输入框..." />
</p>
<p class="no-print">这段文字是不会被打印的，因为它的属性 class 的值中有“no-print”，嘿嘿！！！ </p>
<button class="print-link no-print" onclick="jQuery('#ele1').print()">点击这个按钮进行打印</button>
</div>
<div id="ele2" class="b">
<h3 class='avoid-this'>段落二</h3>
<p>Some really random text.</p>
<pre>
<code>
$("#ele2").find('button').on('click', function() {
//Print ele2 with custom options
$("#ele2").print({
//Use Global styles
globalStyles : false,
//Add link with attrbute media=print
mediaPrint : false,
//Custom stylesheet
stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
//Print in a hidden iframe
iframe : false,
//Don't print this
noPrintSelector : ".avoid-this",
//Add this at top
prepend : "Hello World!!!<br />",
//Add this on bottom
append : "<br />Buh Bye!",
//Log to console when printing is done via a deffered callback
deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
});
});
</code>
</pre>
<button class="print-link avoid-this">在新窗口打开</button>
</div>
<br />
<button class="print-link" onclick="jQuery.print()">点击这个按钮进行打印整个页面</button>
</div> <script type='text/javascript'>
//<![CDATA[
jQuery(function($) {
$("#ele2").find('.print-link').on('click', function() {
//Print ele2 with default options
$.print("#ele2");
});
$("#ele2").find('button').on('click', function() {
//Print ele2 with custom options
$("#ele2").print({
//Use Global styles
globalStyles : false,
//Add link with attrbute media=print
mediaPrint : false,
//Print in a hidden iframe
iframe : false,
//Don't print this
noPrintSelector : ".avoid-this",
//Add this at top
prepend : "Hello World!!!<br/>",
//Add this on bottom
append : "<br/>Buh Bye!",
//Log to console when printing is done via a deffered callback
deferred : $.Deferred().done(function() {
console.log('Printing done', arguments);
})
});
});
});
//]]>
</script>
</body>
</html>
4、运行结果
点击段落一中的按钮