第一次接触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、用户设计的打印页面,可以作为个性化的个人设置,系统维护的同一个模板可以适应不同的打印机。

Web打印控件Lodop实现证件套打的更多相关文章

  1. Web打印控件Lodop实现表格物流单的打印

    Web打印控件Lodop实现表格物流单的打印 一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图 二.写在前面 最近项目用 ...

  2. WEB打印控件Lodop(V6.x)使用说明及样例

    WEB打印控件Lodop(V6.x)使用说明及样例 Lodop是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码生成复杂打印页. 控件功能强大,却简单易用,所有调用如同JavaScript扩展 ...

  3. WEB打印控件LODOP的使用

    有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几乎能想到的打印控制事 ...

  4. C/S架构引用Lodop 如何在C#调用web打印控件Lodop

    lodop是web打印控件,引用安装目录下的ocx文件,可以在c/s架构中使用. 该文件所在路径:C:\Program Files (x86)\MountTaiSoftware\Lodop 有32位和 ...

  5. 比较好用的web打印控件——Lodop

    前一段时间公司一项目比较特殊,客户要求打印单必须是淘宝上卖的那种三联打印单.如果还是使用原来系统自带的打印的话,就会造成无法打印出来理想的效果,于是找了下相关的打印控件,比较网络上比较流行的几款插件, ...

  6. WEB打印控件Lodop使用体会

                    控件的使用方法,作者都已经有详细的使用说明供使用者参考. 但是对于打印表格,确实出现一点小问题,如果表格是自然高度,也就是只设置了table的高度,此时是可以正常显示的 ...

  7. 功能强大的web打印控件lodop的使用

    打印是很多web系统都需要的功能,最近找到一款功能强大,使用简单,价格便宜的web打印工具Lodop,免费也能用,不过有水印,也不贵商业开发建议购买. 废话不多说,拿来就用,从简单的打印开始. 1.下 ...

  8. web打印控件Lodop轻松输出清晰的图表和条码

    一.仅用两行语句实现极其复杂的图表打印.类似如下两句: LODOP.ADD_PRINT_CHART(0,0,400,400,5,document.getElementByI d('table001') ...

  9. WEB打印控件Lodop

    主页 http://www.lodop.net/

随机推荐

  1. 前端js上传文件插件

    1. plupload文件上传 2.ajaxfileupload文件上传

  2. Python操作SQLAlchemy之连表操作

    多对一连表操作 首先有两个知识点: 改变数据输出的方式:可以在表的类中定义一个特殊成员:__repr__,return一个自定义的由字符串拼接的数据连接方式. 数据库中表关系之间除了MySQL中标准的 ...

  3. 1. EM算法-数学基础

    1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 凸函数 通 ...

  4. iOSUITableView头部带有图片并且下拉图片放大效果

    最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...

  5. web开发经验

    图片显示不全 网站进行了迁移,更换了新框架,结果出现了图片显示不全的问题,后来发现是nginx权限问题 curl 无报错,无返回 有可能是url错误,而无服务器对错误的url返回空,没返回错误

  6. Laravel Eloquent使用小记

    原文地址:http://blog.onlywan.cc/14843810761202.html Laravel Eloquent使用小记 今天由于开发数据库业务中间层须要.開始研究Laravel El ...

  7. 【MySql 】is not allowed to connect to this MySql server 无法访问远程MySQL数据库

    问题:访问远程MySQL数据库时报错[is not allowed to connect to this MySql server ]不允许访问,因为MySQL默认只有本机localhost能够访问M ...

  8. CAS (13) —— CAS 使用Maven Profile支持多环境编译

    CAS (13) -- CAS 使用Maven Profile支持多环境编译 摘要 CAS 使用Maven Profile支持多环境编译 版本 tomcat版本: tomcat-8.0.29 jdk版 ...

  9. WebStorm 7.0 支持更多的Web技术

    JetBrains刚刚发布了WebStorm 7.0 GA,支持EJS.Mustache.Handlebars.Web组件.Stylus.Karma.Istanbul.Compass,并增强了很多功能 ...

  10. jstorm之于storm

    关于流处理框架,在先前的文章汇总已经介绍过Strom,今天学习的是来自阿里的的流处理框架JStorm.简单的概述Storm就是:JStorm 比Storm更稳定,更强大,更快,Storm上跑的程序,一 ...