WEB打印控件Lodop實現打印頁面
版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/u012027337/article/details/51596009
最近研究了一下實現打印頁面的功能，實現主要是用到了Lodop打印控件
（一）、Lodop簡介相關的內容搭建可以參閱：Lodop官網
（二）、實現效果如下圖：
當點擊打印按鈕效果如下：
然後呢就可以根據需要打印了，功能完成
（三）實現以上功能的jsp代碼如下：
1、引入相關文件
<%@include file="../common/project.jsp" %>
<script language="javascript" src="${base}/static/js/common/print/LodopFuncs.js"></script>
<script type="text/javascript">
2、定義Lodop的DOM 對象
<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>
3、下面是要打印報表 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>
4、定義打印按鈕和取消按鈕
<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>
5、打印函數的具體實現：
//定義全局變量
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();
}
}
6、取消函數
//取消
function cancel(){
window.history.back();
}
7、整個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";
}
---------------------
作者：慢慢成長的我
來源：CSDN
原文：https://blog.csdn.net/u012027337/article/details/51596009?utm_source=copy
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
WEB打印控件Lodop實現打印頁面