Web列印控制元件Lodop實現證件套打
阿新 • • 發佈：2019-02-16
第一次接觸Lodop大概是在兩年前了，那時候研究Lodop主要是為了驗證它能不能實現列印時在不修改內容的前提下調整樣式，結果是ok的，如今又一次接觸它，是因為工作中需要使用它了，於是再一次碰面
第一步，當然要先從下載開始，下載最新版本的控制元件安裝包，下載技術手冊
第二步，根據技術手冊的說明，完成一個例項，其實很簡單了，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、使用者設計的列印頁面，可以作為個性化的個人設定，系統維護的同一個模板可以適應不同的印表機。