jsp页面实现打印原图的方法

今天客户要求实现打印原图片 不再是缩略图了 网上找了半天 亲自的试了试 这个方法是没问题的，给大家分享下，希望能对您有所帮助

 

/*打印*/
 function printPage(){
  var r = window.confirm("是否打印当前的图片？");
  if(r){
   //设置当前页面显示为原图
   window.document.body.innerHTML = document.getElementById('yzp').innerHTML;
   //调用打印的方法
   window.print(); 
   //刷新本页面
   window.location.reload();
   //注 其实如果你没有引入什么特别的效果 就不用使用 这样子做
   //以下方法就能实现
   //定义对象保存当前页面
   //var bodyHTML = window.document.body.innerHTML;
   //设置当前页面显示为原图
   //window.document.body.innerHTML = document.getElementById('yzp').innerHTML;
   //调用打印机
   //window.print(); 
   //重新保存页面
   window.document.body.innerHTML =bodyHTML;
   //这种方法是不用刷新实现的 因为本人引入了其他的图片预览插件 使用这种方法页面的特效会失效
//此方法为打印耨个区域，以此类推就可以实现好多不同地方的打印功能
  }else{
   return;
  }
  
 }

 //页面的样子
<div id="cutDiv1" class="easyui-panel" data-options="title:'图片预览',iconCls:'icon-originalPhoto'" fit="true" > 
  <div id="cc" class="easyui-layout" style="width:100%;height:100%;"> 
      <!-- 按钮布局 -->
      <div region="north" nohearder="false" style="height:30px;padding-top:2px;" align="right">
        <a href="#" id="idLeft"  class="easyui-linkbutton" data-options="iconCls:'icon-reverse'" >向左旋转</a>
        <a href="#" id="idRight"  class="easyui-linkbutton" data-options="iconCls:'icon-clockwise'" >向右旋转</a>
        <a href="#" id="idVertical"  class="easyui-linkbutton" data-options="iconCls:'icon-upload'" >垂直翻转</a>
        <a href="#" id="idHorizontal"  class="easyui-linkbutton" data-options="iconCls:'icon-back'" >水平翻转</a>
        <a href="#" id="idReset"  class="easyui-linkbutton" data-options="iconCls:'icon-reload'"  >重置</a>
        <a href="#" id="lookup"  class="easyui-linkbutton" data-options="iconCls:'icon-reduce'" value="原图">原图</a>
       <a href="#" id="idLeft"  class="easyui-linkbutton" data-options="iconCls:'icon-print'" onclick="javascript:printPage()" target="_self">打印</a>
       <a href="#" id="idLeft"  class="easyui-linkbutton" data-options="iconCls:'icon-exit'" onclick="javascript:exit()" >退出</a>  
      </div>
     <!-- 原图显示裁剪区域 -->
      <div region="center" nohearder="false" id="cut_cropbox" align="center"  style="overflow: auto;">
    <div id="idContainer"> </div>
    <div id="yzp" style="display: none;" ><img id="yzp" src="scanArchives.dagl?method=getDrvImgInfoZp&dalsh=${dalsh}" style="width:auto;height:auto"/></div>
      </div>    
  </div>