js 调用window.print()方法打印

目的：打印功能实现，添加水印

步骤：

1.写好jsp页面

2.写打印方法

即window.print()打印当前页面，如果只想打印部分页面的话，可以截取该部分赋值给body即可

3.调用打印方法即可

遇到的问题：水印无法打印

刚开始将水印图片赋值给背景图片，即background-image。但是一直无法打印，网上搜了一些人的方案，都无法实现

1.第一个说勾选打印背景图片即可

结果无效。

2.第二个方法是说可能图片未加载出来即调用了打印方法，会导致无法打印出图片

验证方法：我将打印方法手动调用，打印方法改为全局打印（PS：害怕给body赋值的话导致需要重新加载图片），等确认好有图片的时候按下打印方法，结果无效

3.给样式添加@media

@media print{#Pay{background-image:url}} 同样无法打印图片

解决方法：既然无法打印，我就将图片放到img中，利用绝对定位将其放置在需要打印的div上

结果：实现了打印功能

备注：通往成功的路不止一条，该换的时候还是要换的。

jsp部分

<body>
<!--startprint-->
	<div class="table" id="Pay" style="display:block">
        <div class="top">
            	付款申请表
        </div>
        <table border="0" cellspacing="0">
          <tr>
			<td class="gray" colspan="4">应付款情况说明：${pay.notes }</td>
		  </tr>
		  <tr>
		  	<td>合同名称</td>
		  	<td>${pay.reason }</td>
		  	<td>合同编号</td>
		  	<td>${pay.projectNum }</td>
		  </tr>
          <tr>
		  	<td>合同总金额（元）</td>
		  	<td><fmt:formatNumber type="number" value="${pay.money}" maxFractionDigits="2" pattern="#0.00"/>元</td>
		  	<td>合同签署时间</td>
		  	<td><fmt:formatDate value="${pay.projectDate}" type="both" pattern="yyyy-MM-dd"/></td>
		  </tr>
		  <tr>
		  	<td>本次应付款金额</td>
		  	<td><fmt:formatNumber type="number" value="${pay.payMoney}" maxFractionDigits="2" pattern="#0.00"/>元</td>
		  	<td>本次最晚付款时间</td>
		  	<td><fmt:formatDate value="${pay.lastTime}" type="both" pattern="yyyy-MM-dd"/></td>
		  </tr>
		  <tr>
		  	<td>申请人</td>
		  	<td>${pay.createBy.name}</td>
		  	<td>申请日期</td>
		  	<td><fmt:formatDate value="${pay.createDate}" type="both" pattern="yyyy-MM-dd"/></td>
		  </tr>
          <tr>
          	<td class="gray">审批人职位</td>
          	<td class="gray">审批人</td>
          	<td class="gray">审批时间</td>
          	<td class="gray">审批意见</td>
          </tr>
          <c:forEach items="${historyList}" var="hlist">
			<tr>
				<td>${hlist.name}</td>
				<td>${hlist.assignee}</td>
				<td>${fn:substring(hlist.endTime,0,19)}</td>
				<td>${hlist.message}</td>
			</tr>
		</c:forEach>
        </table>
	    <div id="img">
	    	<img alt="" src="${ctxStatic}/images/oa/mark.png">
	    </div>
    </div>
<!--endprint--> 
	<button onclick="dayin()">打 印</button>
</body>

js部分

<script type="text/javascript">
$(document).ready(function() {
	dayin();
});
function dayin(){
	bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
	sprnstr="<!--startprint-->";//设置打印开始区域  
	eprnstr="<!--endprint-->";//设置打印结束区域  
	prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html 
	window.document.body.innerHTML=prnhtml;  
	window.print();  
}
</script>

打印效果

js 调用window.print()方法打印

猜你喜欢