今天客户要求实现打印原图片 不再是缩略图了 网上找了半天 亲自的试了试 这个方法是没问题的,给大家分享下,希望能对您有所帮助
/*打印*/ 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'" οnclick="javascript:printPage()" target="_self">打印</a> <a href="#" id="idLeft" class="easyui-linkbutton" data-options="iconCls:'icon-exit'" οnclick="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>