基于jquery.print.js插件的js打印demo

共4个文件

js：3个

html：1个

打印，print

4星 · 超过85%的资源需积分: 50 14 浏览量 2017-04-21 13:37:53 上传评论 4 收藏 110KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery.print.js-demo.zip （4个子文件）

demo

index.html 4KB

jQuery.print.js 9KB

jquery

jquery.js 258KB

jquery.min.js 84KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打印demo</title>  <script src="js/jquery/jquery.min.js"></script>  <script src="js/jQuery.print.js"></script>  <script type="text/javascript"> $(function () { var content = '<h1>用户自定义的打印内容:使用prepend传入打印内容</h1>'+ '<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">'+ '<tbody>'+ '<tr>'+ '<td valign="middle">'+ '<div align="center"><font style="font-size:18px;line-height: 25px;">${#data.shop}</font> <br>消费结帐单<br></div>'+ '</td>'+ '</tr>'+ '<tr>'+ '<td width="200" valign="middle" bgcolor="#FFFFFF"><div align="left">交易流水号：${#data.paymentNo}<br>消费单号：${#data.soNo}</div></td>'+ '</tr>'+ '<tr>'+ '<td valign="middle" bgcolor="#FFFFFF"><div style="border-bottom:1px dashed #000;margin: 12px 0;"></div></td>'+ '</tr>'+ '<tr>'+ '<td valign="middle" bgcolor="#FFFFFF">'+ '<div align="left">'+ '<table width="100%" border="0" cellpadding="0" cellspacing="0">'+ '<tbody>'+ '<tr>'+ '<td><div align="center" style="font-size: 12">单价</div></td>'+ '<td><div align="center" style="font-size: 12">数量</div></td>'+ '<td><div align="center" style="font-size: 12">合计</div></td>'+ '</tr>'+ /*'<#list iList as item> '+*/ '<tr>'+ '<td colspan="5" align="center" valign="bottom"><div align="left">[${item.barcode}] ${item.name}</div></td>'+ '</tr>'+ '<tr>'+ '<td align="center" valign="bottom">${item.price}</td>'+ '<td align="center" valign="bottom">${item.quantity}</td>'+ '<td align="center" valign="bottom">${item.subTotal}</td>'+ '</tr>'+ /*'</#list> '+*/ '</tbody>'+ '</table>'+ '</div>'+ '</td>'+ '</tr>'+ '<tr>'+ '<td valign="middle" bgcolor="#FFFFFF"><div style="border-bottom:1px dashed #000;margin: 12px 0;"></div></td>'+ '</tr>'+ '<tr>'+ '<td valign="middle" bgcolor="#FFFFFF">'+ '<table width="100%" border="0" cellpadding="0" cellspacing="0">'+ '<tbody>'+ '<tr>'+ '<td>'+ '应付：${#data.shouldPaid} 元<br>'+ '现付：${#data.realdPaid} 元 <br>'+ '找零：${#data.change} 元<br> '+ '操作员：${#data.operator}'+ '</td>'+ '</tr>'+ '</tbody>'+ '</table>'+ '</td>'+ '</tr>'+ '<tr>'+ '<td valign="middle" bgcolor="#FFFFFF">时间：2017-04-20 23:31:48</td>'+ '</tr>'+ '<tr>'+ '<td align="left" bgcolor="#FFFFFF">电话：02584407055<br>地址：万源万达广场凤凰里88号</td>'+ '</tr>'+ '<tr>'+ '<td align="center" bgcolor="#FFFFFF"></td>'+ '</tr>'+ '<tr>'+ '<td align="center" bgcolor="#FFFFFF" height="50">*服装POS系统* 信管35组<br></td>'+ '</tr>'+ '</tbody>'+ '</table>'; jQuery("#ele1").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 : content, //Add this on bottom append : "<br/>Buh Bye!", deferred: $.Deferred().done(function() {console.log('Printing done', arguments); }) }); }); </script> </head> <body> <div id="ele1"></div> <div id="ele2"> 需要打印的内容 </div> <button id="testPrint" class="print-link no-print" onclick="jQuery('#ele2').print()"> 打印这个元素的内容 (jQuery('#ele1').print()) </button> </body> </html>

评论收藏

内容反馈

三員外888

2018-07-10

好好好好好好好
glj_sky_2012

2018-03-08

没有看明白啊。。

JodenHe
上传者
2018-06-24

看不明白证明我的代码水平不高，可以看看我写的这个https://blog.csdn.net/jodenhe/article/details/70313604 或者直接看官网：https://github.com/DoersGuild/jQuery.print 推荐看官网，感觉会好点
bc662321

2018-01-31

使用上了，多谢
libin_china

2017-12-15

没看明白，没用上

JodenHe
上传者
2018-03-07

建议直接看官网介绍，更加详细https://github.com/DoersGuild/jQuery.print
nameless_______

2017-12-13

不错，有空看看源码