WEB列印控制元件Lodop實現列印頁面
阿新 • • 發佈：2019-01-09
最近研究了一下實現列印頁面的功能，實現主要是用到了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
4、定義列印按鈕和取消按鈕<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>
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>@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";
}