js打印局部网页

js打印局部网页一般常用window.print() 方法：

在你需要打印的网页代码中加入

<!--startprint--> //开始打印标识
<!--endprint--> //结束打印标识

html代码：

<div class="box box-widget">
				<div class="box-body no-padding">
				<!--startprint-->
					<table id="dataTable" class="dataTable"> 
						<style type="text/css">
							table
							  {
							  border-collapse:collapse;
							  }
						 
							table, td, th
							  {
							  border:1px solid black;
							  text-align:center;
							  }
						</style>	
					    <tr style='height:60pt;'>
					     <td class='u_r02' colspan=2></td>
					      <td class='u_r02' colspan=7 style='padding:0;'>
					      <img style='width:100%;height:60.0pt;' border=0 src='${ctx}/archives/ze50Barcode/getbarCode?keycode=${ze54entiy.bze549}' >
					      </td>
					      <td class='u_r02' colspan=3></td>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03' colspan=12>批次追踪单</td>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03' colspan=2>档案类型</td>
					      <td class='u_r03' colspan=4>${fns:getDictLabel(ze54entiy.bze192,'BZE192','')}</td>
					      <td class='u_r03' colspan=2>制单人类型</td>
					      <td class='u_r03' colspan=4>市辖区服务网点</td>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03' colspan=2>业务类型</td>
					      <td class='u_r03' colspan=3>${Ze52196.bze202 }</td>
					      <td class='u_r03'>总件数</td>
					      <td class='u_r03' colspan=2>${ze54entiy.bze545}</td>
					      <td class='u_r03' colspan=2>总页数</td>
					      <td class='u_r03' colspan=2>${ze54entiy.bze546}</td>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03' colspan=4 rowspan=2>制单人：${user.name}</td>
					      <td class='u_r03' colspan=4 rowspan=2>检查人：</td>
					      <td class='u_r03' colspan=4 rowspan=2>立卷人：</td>
					    </tr>
					    <tr style='height:15pt;'>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03' colspan=4 rowspan=2>制单时间：<fmt:formatDate value="${ze54entiy.aae036}" pattern="yyyy-MM-dd" /></td>
					      <td class='u_r03' colspan=4 rowspan=2>检查时间：</td>
					      <td class='u_r03' colspan=4 rowspan=2>立卷时间：</td>
					    </tr>
					    <tr style='height:15pt;'>
					    </tr>
					    <tr style='height:15pt;'>
					      <td class='u_r03'>序号</td>
					      <td class='u_r03'>主体信息</td>
					      <td class='u_r03'>条码尾号</td>
					      <td class='u_r03'>页码</td>
					      <td class='u_r03'>序号</td>
					      <td class='u_r03'>主体信息</td>
					      <td class='u_r03'>条码尾号</td>
					      <td class='u_r03'>页码</td>
					      <td class='u_r03'>序号</td>
					      <td class='u_r03'>主体信息</td>
					      <td class='u_r03'>条码尾号</td>
					      <td class='u_r03'>页码</td>
					    </tr>
					   
					    
				    	<c:if test="${not empty ze55slist}">
							<c:forEach items="${ze55slist}" var="c">
							 <%-- 	<c:set var="length" value="${fn:length(c.bze556)}"> --%>
								<c:set var="length" scope="session" value="${fn:length(c.bze556)}"/>
							
								<tr style='height:15pt;'>
							      <td class='u_r03'>1</td>
							      <td class='u_r03'>${c.bze551}</td>
							      <td class='u_r03'> ${fn:substring(c.bze556, length-6, length)} </td>
							      <td class='u_r03'>${c.bze554}/${c.bze554}</td>
							      
							      <td class='u_r03'>2</td>
							      <td class='u_r03'></td>
							      <td class='u_r03'></td>
							      <td class='u_r03'>/</td>
							      
							      <td class='u_r03'>3</td>
							      <td class='u_r03'></td>
							      <td class='u_r03'></td>
							      <td class='u_r03'></td>
							    </tr>
							</c:forEach>
						</c:if>  
					  </table>
					 <!--endprint-->
				</div>
			</div>

打印按钮：onclick 方式
<button  class="btn btn-primary print" onclick="doPrint()">打印</button>
**注意：这里推荐 onclick 方式**

如果使用 on事件绑定方式 会造成，当取消打印时，再度点击打印按钮，打印事件失效
 $(".print").on("click",function(){
            doPrint();
       });
这时候 需要在绑定事件中，当打印事件调用后加入   location.reload() 刷新下网页。

js代码：
function doPrint() { 
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
    eprnstr="<!--endprint-->"; //结束打印标识字符串
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
    window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
    window.print(); //调用浏览器的打印功能打印指定区域
    window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；
    return false;
}

关于打印后样式问题：
我是直接把
style样式加入到打印的代码块中
有方法是说 通过 @media print{ } 方式，我尝试后失败了，各位看官有成功的可以把整段代码贴在评论处，三克油了

其他打印方式可查看：https://blog.csdn.net/weixin_34405354/article/details/86019937