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

<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>編碼

三、下面是要打印報表 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"; }

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程