背景：目前很多项目中均设计到了打印模块，且都需要直接打印，目前公司已购入lodop打印插件，该插件能满足大部分打印相关的功能。

使用方法：http://www.lodop.net/demo.html

1. 在一下LodopFuncs.js里需要设置公司代码，需要找相关人员索要。

注意下面的安装文件（见附件）地址，与你放置的地址需要一直，否则页面验证后无法正常引导安装。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var CreatedOKLodop=CreatedOKLodop7766=null;
function getLodop(oOBJECT,oEMBED){
/**************************
  本函数根据浏览器类型决定采用哪个页面元素作为Lodop对象：
  IE系列、IE内核系列的浏览器采用oOBJECT，
  其它浏览器(Firefox系列、Chrome系列、Opera系列、Safari系列等)采用oEMBED,
  如果页面没有相关对象元素，则自动建立一个,重复调用本函数会按上次那个。
  64位浏览器指向64位的安装程序install_lodop64.exe。
**************************/
        var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
        var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
        var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
        var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
        var strHtmFireFox="<br><br><font color='#FF00FF'>注意：<br>1：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它。</font>";
        var LODOP;     
    try{   
         //=====判断浏览器类型:===============
         var isIE    =  (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
         var is64IE  = isIE && (navigator.userAgent.indexOf('x64')>=0);
         //=====如果页面有Lodop就直接使用，没有则新建或使用上次的:==========
         if (oOBJECT!=undefined || oEMBED!=undefined) {
                 if (isIE) LODOP=oOBJECT;
         else LODOP=oEMBED;
         } else {
         if (CreatedOKLodop==null || CreatedOKLodop7766==null || CreatedOKLodop!=CreatedOKLodop7766){
                 LODOP=document.createElement("object");
             LODOP.setAttribute("width",0);
                     LODOP.setAttribute("height",0);
             LODOP.setAttribute("style","position:absolute;left:0px;top:-100px;"); 
             if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
             else LODOP.setAttribute("type","application/x-print-lodop");      
             document.documentElement.appendChild(LODOP);
                 CreatedOKLodop=CreatedOKLodop7766=LODOP;           
             } else LODOP=CreatedOKLodop;
         };
         //=====判断Lodop插件是否安装过，没有安装或版本过低就提示下载安装:==========
         if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
         if (navigator.userAgent.indexOf('Firefox')>=0)
                     {document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;};
         if (is64IE) {document.write(strHtm64_Install);} else      
         if (isIE)   {document.write(strHtmInstall);   } else
                         {document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;};  
         return LODOP;
         } else
         if (LODOP.VERSION<"6.1.6.4") {
        if (is64IE){document.write(strHtm64_Update);} else
        if (isIE)  {document.write(strHtmUpdate);    } else
                   {document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML; };
        return LODOP;
         }
         //=====如下空白位置适合调用统一功能(如注册码、语言选择等):====     
         LODOP.SET_LICENSES("xxxxxxxxx","xxxxxxxxxx","","");
         //============================================================     
         return LODOP;
    }catch(err){
        if (is64IE)
        document.documentElement.innerHTML="Error:"+strHtm64_Install+document.documentElement.innerHTML;else
        document.documentElement.innerHTML="Error:"+strHtmInstall+document.documentElement.innerHTML;
         return LODOP;
    }
}

2. 页面引用该js

1
<script language="javascript" src="jsp/LodopFuncs.js"></script>

引用后打开改页面会自动去校验浏览器是否存在插件，若不存在会提示如下图

麦库截图20141512155308200.jpg

安装后重启浏览器即可。（目前谷歌浏览器插件貌似打开一次就要安装一次，母鸡什么问题）

3. 目前使用的大部分都是部分打印网页，故在网页里加入打印的元素，举个栗子，如下代码，这里需要打印的是div_print里面的所有内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="div_print" style="display:none">
        <div style="width:275px;font-size:13px;font-family:楷体,宋体;" >
            <div><img src="" id="print_img" style="width:100%"></div>
            <div style="text-align:center;line-height:24px;"><label id="print_name"></label></div>
            <div style="text-align:center;font-size: 13px;font-weight: bold;padding-bottom:2px">贵宾卡号：<label id="print_cardno"></label></div>
            <div style="border-top:black solid 1.5px;border-bottom:black solid 1.5px;">
                <div style="text-align:center;font-size: 22px;padding-top:3px"><label id="print_content"></label></div>
                <div style="text-align:center;font-size: 22px;padding-top:3px"><label id="print_discount"></label></div>
                <div style="line-height:21px;">使用有效期：<label id="print_enddate"></label></div>
                <div class="print_userange"><label id="print_memo"></label></div>
            </div>
            <div style="line-height:22px;">操作人员:<lable id="print_oper"><%=seqno %></label>    日期：<lable id="print_operdate"><%=today %></label></div>
            <div style="text-align:center;margin:0 auto">
                <div id="div_barcodetarget" style="margin:0 auto;text-align:center"></div>
            </div>
        </div>
    </div>

以上是曾经用到的一个例子，页面宽度什么的可定可不定，看打印效果。

4. 当需要打印的内容都填充好后，调用lodop方法，这里已封装了一个方法：

1
2
3
4
5
6
7
8
setPrint:function(id){
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("打印");
        var height = $("#"+id).height()+10;
        LODOP.ADD_PRINT_HTM(0,0,"100%",height,document.getElementById(id).innerHTML);
        LODOP.SET_PRINT_PAGESIZE(3,780,height/25,"");
        return LODOP;
    },

LODOP.SET_PRINT_PAGESIZE(3,780,height/25,"");  这个是宽度高度，根据打印效果设置。具体设置看api

5. LODOP.PRINT;即打印。。。

转载于:https://www.cnblogs.com/intime-dev/p/3596535.html

打印插件LODOP使用介绍相关推荐

  1. 强大的web打印插件--Lodop

    最近公司有个项目需要实现记录打印功能,在网上找到了一个很好的打印插件Lodop,它是一个专门针对web页面打印的控件,里面封装了很多的JS API,用户只要根据自己特定的需要调用里面相应的接口,就可以 ...

  2. Java集成流行的打印插件lodop

    最近做了一个项目,里面涉及了打印的问题,小编就拿出来给大家分享一下,现在jquery库里面的打印都是使用window.print()进行页面的打印还有一些不知名的插件,这些打印有很多的问题,同时也会加 ...

  3. extjs利用第三方打印插件lodop实现打印功能

    extjs由于是基于JS语言,其打印是可以按照一般的WEB打印方式来进行.笔者在网络上发现第三方打印插件Lodop(详见地址:http://mtsoftware.v053.gokao.net/inde ...

  4. jave使用打印插件(Lodop)可以打印以及保存excel

    引用 Lodop 插件实现打印以及另存excel 下面展示一些 内联代码片. // 给个jsp,引入插件js <%@ page language="java" content ...

  5. 转载：打印插件LODOP Vue中的使用

    官网:http://www.lodop.net/index.html 首先需要官网下载安装软件:进入官网后,在下载中心里面下载: 下载后的产品下载压缩包中文件如下图: 其中CLodop_Setup_f ...

  6. lodop打印html没有样式,关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案...

    关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心 比如:页面是这样 打印之后的效果恶心的不要不要的 单独修改后的样式 出现这样的问题就是可能是bs把这个插件当做手机 ...

  7. java lodop打印_[Java教程]LODOP打印插件

    [Java教程]LODOP打印插件 0 2016-03-15 10:00:06 HTML代码(请先下载对应LODOP插件安装)  -    打印onclike事件CreatePrintPage()打印 ...

  8. chrome升级后LODOP打印插件无法使用

    原文地址为: chrome升级后LODOP打印插件无法使用 今天帮朋友使用LODOP实现一个套打程序时,发现LODOP打印插件在chrome下始终无法使用.分析后发现是自己才升级了chrome,chr ...

  9. vue使用lodop打印插件

    首先将lodop安装包放到static下 下载地址:http://www.c-lodop.com/download.html 新建一个vue测试lodop功能 LodopFuncs.js var Cr ...

最新文章

  1. Python中获取字典中最值对应的键
  2. live555 源码分析： SETUP 的处理
  3. 移动端页面滑动事件穿透问题及其解决方案
  4. java jtextfield 事件_JAVA JTextField事件处理
  5. 苦逼的.net程序员, 转行高富帅iOS移动开发
  6. 分部方法 partial
  7. IOS中NSUserDefaults的用法（轻量级本地数据存储）
  8. [解题报告]1005 - Number Sequence
  9. redis DB操作
  10. 解决方案:System.InvalidOperationException: 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分。
  11. CSS控制文本超出指定宽度显示省略号和文本不换行
  12. c语言：8、makeFile编写
  13. 3D目标检测方案总结
  14. illustrator cs5 2学习笔记
  15. 「笔耕不辍」常见远程调用协议
  16. Java的面向对象 -- 继承
  17. B05 - 008、什么是大数据
  18. 中国大学mooc南京航空航天大学民航运输概论章节作业及测试
  19. View 5应用之五：iPad与Android携带虚拟桌面
  20. 微信小程序页面分享出去后用户无法通过分享页面返回首页bug解决方法

热门文章

  1. vnc-server的安装配置
  2. 解决chrome插件安装时出现的“程序包无效”问题信息：程序包无效。
  3. 正则表达式 匹配点号_Python入门：正则表达式(Regular Expression)
  4. DVWA上XSS(DOM)(基于 DOM 的跨站脚本)全难度
  5. 量旋科技对话LAMBDA实验室 | 如何把握量子计算突变发展的机会？
  6. win10 镜像文件资源
  7. mysql执行insert和update处理字段是数据库关键字的问题
  8. 1.6 泛化能力，生成模型，判别模型
  9. 在服务器里替换class文件,tomcat项目中class文件替换无效引发的思考
  10. Vue3 实现路由跳转