jQuery简单易用的网页内容打印插件jQuery.print,由于是初级研究这个插件的使用,当时也碰到许多小问题,今天就跟大家分享一下,希望可以帮助大家解决困扰。如果尝试以后,遇见问题可以评论,如果我看到了,我会积极帮助大家解决的。
一.首先下载一个jQueryPrint
http://www.jq22.com/jquery-info12837(给大家提供一个下载的网址,不过这个网址好像是需要花钱的,如果谁急着需要用到,可以联系我,给你发一份已经下载好的。)
二.下载好的文件夹里面会有一个实例
三.把这个插件真正用到我们想要打印的页面
1.首先引入js,css样式
</head>
<body>
<!--[if lt IE 9]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<h3><span> jQuery.print</span></h3>
<div id="content_holder">
**//此处为打印的尝试区ele1**
<div id="ele1" class="a">
<h3>Element 1</h3>
<p>
Some random text.
<input type="text" value="Dummy input text" />
</p>
<button class="print-link no-print" onclick="jQuery('#ele1').print()">
Print this (jQuery('#ele1').print())
</button>
</div>
**//此处为打印的尝试区ele2**
<div id="ele2" class="b">
<h3>Element 2</h3>
<p>
Some other random text.
</p>
<button class="print-link no-print">
Print this ($.print("#ele2")) and skip the button (.no-print)
</button>
</div>
**//此处为打印的尝试区ele3**
<div id="ele3" class="a">
<h3>Element 3</h3>
<p class="no-print">
Some more random text that is not to be printed.
</p>
<button class="print-link" onclick="jQuery.print('#ele3')">
Print this (jQuery.print('#ele3'))
</button>
</div>
**//此处为打印的尝试区ele4**
<div id="ele4" class="b">
<h3 class='avoid-this'>Element 4</h3>
<p>
Some really random text.
</p>
<pre><code>
**//此处为打印的尝试区ele4的打印内容部分**
$("#ele4").find('button').on('click', function() {
//Print ele4 with custom options
$("#ele4").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">
Print this in a new window, without this button and the title
</button>
</div>
<br/>
**//此处为打印按钮,并且是弹出页面实现预览效果**
<button class="print-link" onclick="jQuery.print()">
Print page - jQuery.print()
</button>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="jQuery.print.js"></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(function($) { 'use strict';
$("#ele2").find('.print-link').on('click', function() {
//Print ele2 with default options
$.print("#ele2");
});
$("#ele4").find('button').on('click', function() {
//Print ele4 with custom options
$("#ele4").print({
//Use Global styles
globalStyles : false, //是否包含父文档的样式,默认为true
//Add link with attrbute media=print
mediaPrint : false, //是否包含media='print'的链接标签。会被globalStyles选项覆盖,默认为false
//Print in a hidden iframe
iframe : false, //是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false就是说新开一个页面打印,默认为true
//Don't print this
noPrintSelector : ".avoid-this", //不想要打印的东西,就在class里面添加这个.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>
```