WEB打印控件Lodop实现打印页面

时间 2019-11-15

标签 web 打印控件 lodop 实现页面栏目 HTML 繁體版

原文原文链接

版权声明：本文为博主原创文章，未经博主容许不得转载。 https://blog.csdn.net/u012027337/article/details/51596009
最近研究了一下实现打印页面的功能，实现主要是用到了Lodop打印控件javascript

（一）、Lodop简介相关的内容搭建能够参阅：Lodop官网html

（二）、实现效果以下图：java

当点击打印按钮效果以下：chrome

而后呢就能够根据须要打印了，功能完成浏览器

（三）实现以上功能的jsp代码以下：app

一、引入相关文件jsp

<%@include file="../common/project.jsp" %>
<script language="javascript" src="${base}/static/js/common/print/LodopFuncs.js"></script>
<script type="text/javascript">
函数

二、定义Lodop的DOM 对象ui

三、下面是要打印报表 table

<div data-options="region:'center', border:false">
<div id="print_div" style="width: 40%;height: 90%;margin: 0 auto;min-height: 500px;min-width: 760px;">
<div style="line-height:40px;padding:10px; text-align:left;font-size: 28px;font-weight: bold;font-family: '宋体'">模版一：管理员信息收集模版</div>
<table style="margin: 0 auto;border-bottom: 1px solid black;border-right:1px solid black;height: 30%" cellpadding="0" cellspacing="0">
<tr style="height: 3%">
<td style="width:700px;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:24px;" colspan="6">单位名称：${dwmc}</td>
<td style="width:80px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:20px;"></td>
</tr>
<tr style="height: 2%">
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:10px;">科室编码</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">科室</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">姓名</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">身份证号码</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">手机</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">人员编号（工号）</td>
<td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">QQ</td>
</tr>

<tr style="height: 2%">
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:10px;">${ksbm}</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">信息科</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px">陈军</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">513623198010150456</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">13183850408</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">0001</td>
<td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">21625661</td>
</tr>
</table>
</div>
</div>
四、定义打印按钮和取消按钮
<div data-options="region:'north'" style="height:36px; border-collapse: collapse;border-bottom: 1px solid #abafb8;border-left: none;border-right: none;">
<table style=" font-size:14px;color:#c4c4c4;text-align: center;width: 100%;">
<tr>
<td style="height: 28px;text-align: left;">
<a id="btn_print" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'" onclick="javascript:toPrint();">打印</a>
<a id="btn_cancel" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-close'" href="javascript:cancel();">取消</a>
</td>
</tr>
</table>
</div>

五、打印函数的具体实现：

//定义全局变量
var LODOP;
//打印
function toPrint() {
//识别各类浏览器的实现原理是根据navigator.userAgent返回值识别,若是为chrome浏览器
if (navigator.userAgent.indexOf('Chrome')>=0){
var headstr = "<html><head></head><body>";
var footstr = "</body>";
//得到 print_div 里的全部 html 数据(把要打印的数据嵌套在一个 div 里，得到 div)
var printData = document.getElementById("print_div").innerHTML;
//获取当前页面的html
var oldstr = document.body.innerHTML;
//把 headstr+printData+footstr 里的数据复制给 body 的 html 数据，至关于重置了整个页面的内容
document.body.innerHTML = headstr+printData+footstr;
//使用方法为 window.print() 打印页面上局部的数据
window.print();
document.body.innerHTML = oldstr;
}else{
if(!LODOP){
//getLodop的任务是判断浏览器的类型并决定采用哪一个对象实例，并检测控件是否安装、是否最新版本、并引导安装或升级
LODOP=getLodop();

}
if(LODOP){
var headstr = "<html><head></head><body>";
var footstr = "</body>";
var printData = document.getElementById("print_div").innerHTML;
var oldstr = document.body.innerHTML;
var data = headstr+printData+footstr;
LODOP.ADD_PRINT_HTM(20,32,"92%","94%",data);
LODOP.SET_PRINT_STYLEA(0,"HOrient",3);
LODOP.SET_PRINT_STYLEA(0,"VOrient",3);
LODOP.PREVIEW();
}
}

六、取消函数

//取消
function cancel(){
window.history.back();
}

七、整个jsp页面<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ include file="../common/taglibs.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <%@include file="../common/project.jsp" %> <script language="javascript" src="${base}/static/js/common/print/LodopFuncs.js"></script> <script type="text/javascript">//定义全局变量var LODOP;//打印function toPrint() { //识别各类浏览器的实现原理是根据navigator.userAgent返回值识别,若是为chrome浏览器 if (navigator.userAgent.indexOf('Chrome')>=0){ var headstr = "<html><head></head><body>"; var footstr = "</body>"; //得到 print_div 里的全部 html 数据(把要打印的数据嵌套在一个 div 里，得到 div) var printData = document.getElementById("print_div").innerHTML; //获取当前页面的html var oldstr = document.body.innerHTML; //把 headstr+printData+footstr 里的数据复制给 body 的 html 数据，至关于重置了整个页面的内容 document.body.innerHTML = headstr+printData+footstr; //使用方法为 window.print() 打印页面上局部的数据 window.print(); document.body.innerHTML = oldstr; }else{ if(!LODOP){ //getLodop的任务是判断浏览器的类型并决定采用哪一个对象实例，并检测控件是否安装、是否最新版本、并引导安装或升级 LODOP=getLodop(); } if(LODOP){ var headstr = "<html><head></head><body>"; var footstr = "</body>"; var printData = document.getElementById("print_div").innerHTML; var oldstr = document.body.innerHTML; var data = headstr+printData+footstr; LODOP.ADD_PRINT_HTM(20,32,"92%","94%",data); LODOP.SET_PRINT_STYLEA(0,"HOrient",3); LODOP.SET_PRINT_STYLEA(0,"VOrient",3); LODOP.PREVIEW(); } }}//取消function cancel(){ window.history.back();} </script> </head> <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed> </object> <body class="easyui-layout" data-options="fit:true"> <div data-options="region:'north'" style="height:36px; border-collapse: collapse;border-bottom: 1px solid #abafb8;border-left: none;border-right: none;"> <table style=" font-size:14px;color:#c4c4c4;text-align: center;width: 100%;"> <tr> <td style="height: 28px;text-align: left;"> <a id="btn_print" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'" onclick="javascript:toPrint();">打印</a> <a id="btn_cancel" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-close'" href="javascript:cancel();">取消</a> </td> </tr> </table> </div> <div data-options="region:'center', border:false"> <div id="print_div" style="width: 40%;height: 90%;margin: 0 auto;min-height: 500px;min-width: 760px;"> <div style="line-height:40px;padding:10px; text-align:left;font-size: 28px;font-weight: bold;font-family: '宋体'">模版一：管理员信息收集模版</div> <table style="margin: 0 auto;border-bottom: 1px solid black;border-right:1px solid black;height: 30%" cellpadding="0" cellspacing="0"> <tr style="height: 3%"> <td style="width:700px;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:24px;" colspan="6">单位名称：${dwmc}</td> <td style="width:80px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:20px;"></td> </tr> <tr style="height: 2%"> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:10px;">科室编码</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">科室</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">姓名</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">身份证号码</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">手机</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">人员编号（工号）</td> <td style="width:10%;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">QQ</td> </tr> <tr style="height: 2%"> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: left;font-size:10px;">${ksbm}</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">信息科</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px">陈军</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">513623198010150456</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">13183850408</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">0001</td> <td style="width:10%px;border-top: 1px solid black;border-left:1px solid black;text-align: center;font-size:10px;">21625661</td> </tr> </table> </div> </div> </body> </html></pre><pre>Controller层代码以下：@RequestMapping(value="organization/toAddOrgPage") public String toAddOrgPage(HttpServletRequest request,Model model) throws Exception{ String ksbm = "11060"; String dwmc = "第三人民医院"; model.addAttribute("ksbm", ksbm); model.addAttribute("dwmc", dwmc); return "view"; }