Web打印控件Lodop實現證件套打


第一次接觸Lodop大概是在兩年前了,那時候研究Lodop主要是為了驗證它能不能實現打印時在不修改內容的前提下調整樣式,結果是ok的,如今又一次接觸它,是因為工作中需要使用它了,於是再一次碰面

Lodop的官方網站http://www.lodop.net/index.html很簡單,但卻很全面,有控件介紹,有在線示例,這些就已經足夠了

第一步,當然要先從下載開始,下載最新版本的控件安裝包,下載技術手冊

第二步,根據技術手冊的說明,完成一個實例,其實很簡單了,Lodop真的做到了分分鍾就能實現Web套打,先看看最后實現的效果


很酷吧,有背景,有文本,有圖像,證件套打基本的元素都有了

下面看看代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script language="javascript" src="lodop/LodopFuncs.js"></script>
		<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>

	</head>

	<body>
		<script language="javascript">
			var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
		</script>
		<br>
		<button type="button" onclick="design()">
			設計模板
		</button>
		    
		<button type="button" onclick="view()">
			打印預覽
		</button>
		<br>
		<textarea id="templateCode" cols="100" rows="30" style="background-color: #fff;"></textarea>
	</body>
	<script type="text/javascript">
	function view() {
		init();
		LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",1);
		LODOP.PREVIEW();
	}
	function design() {
		init();
		document.getElementById('templateCode').value=LODOP.PRINT_DESIGN();
	}

	function init() {
		LODOP.PRINT_INIT("打印身份證");
		LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='<%=basePath%>/images/身份證背面.png'>");
		LODOP.SET_PRINT_STYLE("FontSize",11);
		LODOP.ADD_PRINT_TEXT(184,117,172,20,"1234567890X");
		LODOP.SET_PRINT_STYLEA(0,"FontName","新宋體");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",10);
		LODOP.ADD_PRINT_TEXT(34,63,46,20,"張三");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(61,72,22,20,"男");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(60,142,21,20,"漢");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(114,62,219,20,"北京市東城區xxx街道第201號");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(85,65,41,20,"2015");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(85,118,22,20,"01");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_TEXT(85,150,23,20,"31");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",9);
		LODOP.ADD_PRINT_IMAGE(30,247,63,63,"<img border='0' src='<%=basePath%>/images/頭像.png'>");
	}
</script>
</html>

短短幾十行js和html代碼就足夠了,設計按鈕效果如下圖所示:


需要說明的是,Lodop控件安裝文件需要和打印的頁面放在同一個目錄下,否則提示安裝的鏈接會找不到安裝包文件



最后,簡單說下Lodop的優勢吧,之所以選用Lodop是因為:

1、兼容性好,主流的瀏覽器都支持了;

2、插件能實現自動安裝提醒,並且不需要其他額外的設置;

3、能夠實現權限控制,比如在不修改內容的前提下修改打印的樣式,比如調整字體,比如調整位置……。支持的權限控制如下:


4、用戶設計的打印頁面,可以作為個性化的個人設置,系統維護的同一個模板可以適應不同的打印機。




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM