WEB打印控件Lodop(V6.x)使用说明及样例

WEB打印控件Lodop(V6.x)使用说明及样例

Lodop是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码生成复杂打印页。 控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：

● PRINT_INIT(strPrintTaskName)打印初始化 ● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 ● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项 ● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项 ● ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项 ● ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形 ● SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格 ● PREVIEW打印预览 ● PRINT直接打印 ● PRINT_SETUP打印维护 ● PRINT_DESIGN打印设计

可邮件gungho999@sina.com索取技术手册或访问官博简明教程,了解更多详细资料。 下面通过演示样例来理解，为容易理解源代码，每个样例尽量简单， 一个样例代表一类应用,在实际开发中都可混合使用。

样例清单 1. 如何在页面内嵌入控件见样例一 2. 如何选材打印当前页面内容见样例二 3. 如何用代码生成打印页见样例三 4. 如何打印设计和定位套打见样例四 5. 如何控制纸张大小和连续打印见样例五 6. 如何输出多页长文档及双面打印见样例六 7. 如何定向输出见样例七 8. 如何打印图片见样例八 9. 如何用程序加载打印维护背景图见样例九 10 如何控制打印样式(STYLE)见样例十 11 如何直接打印条形码见样例十一 12 如何读写本地文件见样例十二 13 如何打印旋转内容见样例十三 14 如何按URL打印见样例十四 15 如何打印表格的页头页尾见样例十五 16 如何设置预览窗口大小见样例十六 17 如何发打印机指令或直接读写端口见样例十七 18 如何打印幅面高度不固定的票据见样例十八 19 如何内嵌显示及预览时包含背景图见样例十九 20 如何强制分页并预览多页卡片见样例二十 21 如何控制打印维护的功能权限见样例二十一 22 如何构建自己的纯WEB打印预览见样例二十二 23 如何居中打印超文本见样例二十三 24 如何选择界面皮肤见样例二十四 25 如何指定输出到哪页或仅预览见样例二十五 26 如何提高多页打印的性能见样例二十六 27 如何导出数据到Excel文件见样例二十七 28 如何快速读取客户端系统信息见样例二十八 29 如何使用其它长度单位见样例二十九 30 如何分页输出页面内容见样例三十 31 如何打印表格的分页小计或合计见样例三十一 32 如何实现清晰的图表打印见样例三十二 33 如何实现甘特图等的图表打印见样例三十三 34 如何使用百分比%和满页打印见样例三十四 35 如何获得打印结果和程序代码见样例三十五 36 如何在设计过程中用js编辑内容见样例三十六 37 如何打印公章效果图见样例三十七 38 如何用BASE64编码输出图片见样例三十八 39 如何打印田字格、上划线等文本见样例三十九 40 如何进行数据格式转换见样例四十 41 如何把内容关联后按顺序打印见样例四十一 42 如何把整页内容缩放打印见样例四十二 43 如何分页打印综合表格见样例四十三 44 如何缩放打印单个超文本内容见样例四十四 45 如何获得打印状态及最终结果见样例四十五 46 如何设置右边距和下边距见样例四十六

需要下载的插件

---------------------------------------------------------------使用样例

<%@ 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> &gt; <a
href="${ctx}/admin/BillAdjustList/BillAdjustList" title="采购管理">xxxx</a>
&gt; <a href="${ctx}/admin/BillAdjustList/BillAdjustList"
title="xxx">xxx</a> &gt; 打印
</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">&nbsp;&nbsp;&nbsp;&nbsp; <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);};
};