WEB打印控件Lodop(V6.x)使用说明及样例
|
|
|
|
需要下载的插件
---------------------------------------------------------------使用样例
<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="../../include/taglibs.jspf"%>
<m:h>
<%@include file="../../include/elibs.jspf"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/lib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/js/lib/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/admin/uploader.css">
<script src="${ctx}/js/LodopFuncs.js"></script>
<style type="text/css">
.panel-header {
background: #f5f5f5;
}
.layout-split-east {
border-left: #f5f5f5;
}
.table-module01 td {
position: relative;
}
.table-module01 td .errorTip {
position: absolute;
left: 14px;
top: 35px;
}
.table-module01 td .errorTip.errcon {
top: 114px;
}
.upload-entry-icon img {
width: 110px;
height: 110px;
}
.panel.window {
top: 100px !important;
}
.window-shadow {
top: 100px !important;
}
</style>
</m:h>
<script type="text/javascript"
src="${ctx}/js/lib/easyui/jquery.easyui.min.js"></script>
<script src="${contextPath}/js/print/jquery.PrintArea.js"></script>
<%@include file="../../include/admin/adminHead.jspf"%>
<div class="main">
<%@include file="../../include/admin/adminSidebar.jspf"%>
<!-- Begin 主内容区 -->
<div class="content">
<!-- Begin 当前位置 -->
<div class="position">
<span>您当前的位置:</span> <a href="${ctx}/admin" title="首页">首页</a> > <a
href="${ctx}/admin/BillAdjustList/BillAdjustList" title="采购管理">xxxx</a>
> <a href="${ctx}/admin/BillAdjustList/BillAdjustList"
title="xxx">xxx</a> > 打印
</div>
<div class="editPage">
<div class="tab-ct-wrap">
<form action="${actx}/admin/pickgoods/save" method="post"
id="cat-form">
<table class="table-module01" cellpadding="0" cellspacing="0">
<tbody class="tab1">
<tr>
<td>
<div id="div1">
<table cellpadding="0">
<tr>
<td colspan="8" align="center" style="padding:10px;font-size:18px;font-weight:bold;">xxx</td>
</tr>
<tr>
<td style="padding:3px">制单人:${pickgoods.addusername }</td><td> </td>
<td>客户:${pickgoods.companyname }</td><td> </td>
<td>打印人:${userName}</td><td> </td>
</tr>
<tr>
<td style="padding:3px">单据号:${pickgoods.billno}</td><td> </td>
<td>单据日期:${fn:substring(pickgoods.billdate,0,10)}</td> <td> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="1">
<div style="overflow: auto; height: 300px; width: 1100px" id="div2">
<table id="goods" class="imagetable" cellspacing="0" cellpadding="3" border=1>
<tr>
<th style="border:1px solid #ccc;font-size:14px;">编号</th>
<th style="border:1px solid #ccc;font-size:14px;">名称</th>
<th style="border:1px solid #ccc;font-size:14px;">规格</th>
<th style="border:1px solid #ccc;font-size:14px;">剂型</th>
<th style="border:1px solid #ccc;font-size:14px;">单位</th>
<th style="border:1px solid #ccc;font-size:14px;">厂家</th>
<th style="border:1px solid #ccc;font-size:14px;">批号</th>
<th style="border:1px solid #ccc;font-size:14px;">生产日期</th>
<th style="border:1px solid #ccc;font-size:14px;">待拣货数</th>
<th style="border:1px solid #ccc;font-size:14px;">产地</th>
<th style="border:1px solid #ccc;font-size:14px;">仓库</th>
<th style="border:1px solid #ccc;font-size:14px;">货位</th>
<th style="border:1px solid #ccc;font-size:14px;">拣货数</th>
</tr>
<c:if test="${not empty pickgoods.pickGoodsDetialList}">
<input type="hidden" name="id" value="${salesTicket.id}">
<c:forEach items="${pickgoods.pickGoodsDetialList}"
var="item">
<tr>
<td style="border:1px solid #ccc;font-size:14px;">${item.id }</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.goodsName }</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.specifications}</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.dosageName }</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.unitName }</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.manufacturerName }</td>
<td style="border:1px solid #ccc;font-size:14px;"> ${item.batchnumber }</td>
<td style="border:1px solid #ccc;font-size:14px;">${fn:substring(item.productiondate,0,10)}</td>
<td style="border:1px solid #ccc;font-size:14px;">${ item.number}</td>
<td style="border:1px solid #ccc;font-size:14px;">${ item.madeInName}</td>
<td style="border:1px solid #ccc;font-size:14px;">${ item.storeName}</td>
<td style="border:1px solid #ccc;font-size:14px;">${ item.storeHouseName}</td>
<td style="border:1px solid #ccc;font-size:14px;">${item.arrivalquantity }</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
<br/>
<br/>
<table>
<tr>
<td style="padding:3px">签字人:</td><td> </td><td> </td><td> </td><td> </td><td> </td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<td style="padding:3px">签字日期:</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center"> <span
class="btn-sure-wrap"> <input class="btn-sure btn-edit"
type="button" value="打印" οnclick="print_ducument();" />
</span> <span class="btn-cancel-wrap"> <a class="btn-cancel"
href="${ctx}/admin/pickgoods/pickgoodsList">返回</a>
</span>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<script type="text/javascript">
/**打印***/
function print_ducument() {
var LODOP=getLodop();
LODOP.ADD_PRINT_HTM(0,10,"100%","100%",document.getElementById("div1").innerHTML);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
LODOP.ADD_PRINT_HTM(100,0,"100%","100%",document.getElementById("div2").innerHTML);
LODOP.PREVIEW();
}
</script>
<m:f />
----------------------------------------------------------------------------------------------------------------------LodopFuncs.js
var CreatedOKLodop7766=null;
//====判断是否需要安装CLodop云打印服务器:====
function needCLodop(){
try{
var ua=navigator.userAgent;
if (ua.match(/Windows\sPhone/i) !=null) return true;
if (ua.match(/iPhone|iPod/i) != null) return true;
if (ua.match(/Android/i) != null) return true;
if (ua.match(/Edge\D?\d+/i) != null) return true;
if (ua.match(/QQBrowser/i) != null) return false;
var verTrident=ua.match(/Trident\D?\d+/i);
var verIE=ua.match(/MSIE\D?\d+/i);
var verOPR=ua.match(/OPR\D?\d+/i);
var verFF=ua.match(/Firefox\D?\d+/i);
var x64=ua.match(/x64/i);
if ((verTrident==null)&&(verIE==null)&&(x64!==null))
return true; else
if ( verFF !== null) {
verFF = verFF[0].match(/\d+/);
if ( verFF[0] >= 42 ) return true;
} else
if ( verOPR !== null) {
verOPR = verOPR[0].match(/\d+/);
if ( verOPR[0] >= 32 ) return true;
} else
if ((verTrident==null)&&(verIE==null)) {
var verChrome=ua.match(/Chrome\D?\d+/i);
if ( verChrome !== null ) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0]>=42) return true;
};
};
return false;
} catch(err) {return true;};
};
//====页面引用CLodop云打印必须的JS文件:====
if (needCLodop()) {
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var oscript = document.createElement("script");
oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore( oscript,head.firstChild );
//本机云打印的后补端口8001:
oscript = document.createElement("script");
oscript.src ="http://localhost:8001/CLodopfuncs.js?priority=2";
head.insertBefore( oscript,head.firstChild );
};
//====获取LODOP对象的主过程:====
function getLodop(oOBJECT,oEMBED){
var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='/lodop/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/lodop/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='/lodop/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/lodop/install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtmFireFox="<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
var strCLodopInstall="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
var LODOP;
try{
var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
if (needCLodop()) {
try{ LODOP=getCLodop();} catch(err) {};
if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好,请稍后再试!"); return;};
if (!LODOP) {
if (isIE) document.write(strCLodopInstall); else
document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
return;
} else {
if (CLODOP.CVERSION<"2.0.6.8") {
if (isIE) document.write(strCLodopUpdate); else
document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML;
};
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
};
} else {
var is64IE = isIE && (navigator.userAgent.indexOf('x64')>=0);
//=====如果页面有Lodop就直接使用,没有则新建:==========
if (oOBJECT!=undefined || oEMBED!=undefined) {
if (isIE) LODOP=oOBJECT; else LODOP=oEMBED;
} else if (CreatedOKLodop7766==null){
LODOP=document.createElement("object");
LODOP.setAttribute("width",0);
LODOP.setAttribute("height",0);
LODOP.setAttribute("style","position:absolute;left:0px;top:-100px;width:0px;height:0px;");
if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
else LODOP.setAttribute("type","application/x-print-lodop");
document.documentElement.appendChild(LODOP);
CreatedOKLodop7766=LODOP;
} else LODOP=CreatedOKLodop7766;
//=====Lodop插件未安装时提示下载地址:==========
if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
if (navigator.userAgent.indexOf('Chrome')>=0)
document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML;
if (navigator.userAgent.indexOf('Firefox')>=0)
document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;
if (is64IE) document.write(strHtm64_Install); else
if (isIE) document.write(strHtmInstall); else
document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;
return LODOP;
};
};
if (LODOP.VERSION<"6.2.0.8") {
if (needCLodop())
document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML; else
if (is64IE) document.write(strHtm64_Update); else
if (isIE) document.write(strHtmUpdate); else
document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML;
return LODOP;
};
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
//===========================================================
return LODOP;
} catch(err) {alert("getLodop出错:"+err);};
};