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