<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印demo</title>
<!-- jQuery -->
<script src="js/jquery/jquery.min.js"></script>
<!-- jQuery.print -->
<script src="js/jQuery.print.js"></script>
<!-- 加载自定义的js -->
<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>
- 1
- 2
前往页