1. Lodop需要在计算机上下载一个控件C-Lodop

  2. 引用C-Lodop很简单,在页面head中添加 如下路径的js文件,就可用固定变量名LODOP或CLODOP发打印请求了:

<script src='./LodopFuncs.js'></script>

由于我写了引申的方法,可以判断是否开启控件,能否加载出这个文件,所以直接引的另一个文件,来判断这个文件的核心方法。

<script src='http://localhost:18000/CLodopfuncs.js'></script>
  1. 页面引用了C-Lodop的js之后,就可以调用Lodop传统功能
var strHTML=document.getElementsByTagName("html")[0].innerHTML;
LODOP.PRINT_INITA(1,1,770,660,"测试预览功能");
LODOP.ADD_PRINT_TEXT(10,60,300,200,"这是测试的纯文本,下面是超文本:");
LODOP.ADD_PRINT_HTM(30,5,"100%","80%",strHTML);
LODOP.PREVIEW();
  • 本服务有两个http端口默认是"8000"和"18000",页面程序可同时双引用。

一般有一个衍生js文件,去判断有没有安装打印控件,做基本的判断
LodopFuncs.js

var CreatedOKLodop7766 = null, CLodopIsLocal;
//====判断是否需要 Web打印服务CLodop:===
//===(不支持插件的浏览器版本需要用它)===
function needCLodop() {try {var ua = navigator.userAgent;if (ua.match(/Windows\sPhone/i))return true;if (ua.match(/iPhone|iPod|iPad/i))return true;if (ua.match(/Android/i))return true;if (ua.match(/Edge\D?\d+/i))return true;var verTrident = ua.match(/Trident\D?\d+/i);var verIE = ua.match(/MSIE\D?\d+/i);var verOPR = ua.match(/OPR\D?\d+/i);var verFF = ua.match(/Firefox\D?\d+/i);var x64 = ua.match(/x64/i);if ((!verTrident) && (!verIE) && (x64))return true;else if (verFF) {verFF = verFF[0].match(/\d+/);if ((verFF[0] >= 41) || (x64))return true;} else if (verOPR) {verOPR = verOPR[0].match(/\d+/);if (verOPR[0] >= 32)return true;} else if ((!verTrident) && (!verIE)) {var verChrome = ua.match(/Chrome\D?\d+/i);if (verChrome) {verChrome = verChrome[0].match(/\d+/);if (verChrome[0] >= 41)return true;}}return false;} catch (err) {return true;}
}//====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000)避免其中某个被占用:====
if (needCLodop()) {var src1 = "http://localhost:8000/CLodopfuncs.js?priority=1";var src2 = "http://localhost:18000/CLodopfuncs.js?priority=0";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;var oscript = document.createElement("script");oscript.src = src1;head.insertBefore(oscript, head.firstChild);oscript = document.createElement("script");oscript.src = src2;head.insertBefore(oscript, head.firstChild);CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i));
}//====获取LODOP对象的主过程:====
function getLodop(oOBJECT, oEMBED) {var appaddress = $("#shipprint").attr("app_address");var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://s0.imhimg.com/install_lodop32.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://s0.imhimg.com/install_lodop32.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='http://s0.imhimg.com/install_lodop64.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='http://s0.imhimg.com/install_lodop64.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='http://s0.imhimg.com/Lodop6.226_Clodop3.083.zip' target='_self'>下载执行安装</a>";var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";var strCLodopInstall_3 = ",成功后请刷新本页面。</font>";var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='http://s0.imhimg.com/Lodop6.226_Clodop3.083.zip' target='_self'>执行升级</a>,升级后请刷新页面。</font>";var LODOP;try {var errMsg = "";var ua = navigator.userAgent;var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));if (needCLodop()) {try {LODOP = getCLodop();} catch (err) {}if (!LODOP && document.readyState !== "complete") {alert("网页还没下载完毕,请稍等一下再操作.");return;}if (!LODOP) {errMsg = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + errMsg;                errMsg = errMsg.replace(/<br[\/]?>/,"");$("#modalremind").show(); $("#modalremind .tip-content").html(errMsg);return false;return;} else {if (CLODOP.CVERSION < "3.0.6.0") {errMsg = strCLodopUpdate + errMsg;}if (oEMBED && oEMBED.parentNode)oEMBED.parentNode.removeChild(oEMBED);if (oOBJECT && oOBJECT.parentNode)oOBJECT.parentNode.removeChild(oOBJECT);}} else {var is64IE = isIE && !!(ua.match(/x64/i));//=====如果页面有Lodop就直接使用,没有则新建:==========if (oOBJECT || oEMBED) {if (isIE)LODOP = oOBJECT;elseLODOP = oEMBED;} else if (!CreatedOKLodop7766) {LODOP = document.createElement("object");LODOP.setAttribute("width", 0);LODOP.setAttribute("height", 0);LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");if (isIE)LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");elseLODOP.setAttribute("type", "application/x-print-lodop");document.documentElement.appendChild(LODOP);CreatedOKLodop7766 = LODOP;} elseLODOP = CreatedOKLodop7766;//=====Lodop插件未安装时提示下载地址:==========if ((!LODOP) || (!LODOP.VERSION)) {if (ua.indexOf('Chrome') >= 0)errMsg = strHtmChrome + errMsg;if (ua.indexOf('Firefox') >= 0){errMsg = strHtmFireFox + errMsg;errMsg = (is64IE ? strHtm64_Install : strHtmInstall) + errMsg;errMsg = errMsg.replace(/<br[\/]?>/,"");$("#modalremind").show(); $("#modalremind .tip-content").html(errMsg);return false;}return LODOP;}}if (LODOP.VERSION < "6.2.2.4") {if (!needCLodop()){errMsg = (is64IE ? strHtm64_Update : strHtmUpdate) + errMsg;errMsg = errMsg.replace(/<br[\/]?>/,"");$("#modalremind").show(); $("#modalremind .tip-content").html(errMsg);return false;}return LODOP;}if(LODOP.GET_PRINTER_COUNT() < 1){errMsg = "<br><font color='#FF00FF'>请先连接打印设备再进行打印。</font>"+errMsg;}//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==if(errMsg){errMsg = errMsg.replace(/<br[\/]?>/,"");$("#modalremind").show(); $("#modalremind .tip-content").html(errMsg);return false;}LODOP.SET_LICENSES("","13528A153BAEE3A0254B9507DCDE2839","","");//=======================================================return LODOP;} catch (err) {alert("getLodop出错:" + err);}
}

可以用getLodop()方法去判断有没有安装Lodop打印控件

try{var LODOP = getCLodop();//如果没有安装,这个函数会走到if (!LODOP) 那里,然后给出安装提示
}catch(err){}

小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jquery-1.12.4.min.js"></script><script src="./LodopFuncs.js"></script>
</head><body><button>打印</button><script>$('button').on('click',function(){//调用判断是否安装lodop,安装了并获取的方法var LODOP = getCLodop();if(LODOP){var page_width   = 280;var page_height   = 127;var url = 'https://www.baidu.com/img/bd_logo1.png';LODOP.PRINT_INITA("0mm","0mm",page_width+"mm",page_height+"mm","");LODOP.SET_PRINT_PAGESIZE("",page_width+'mm',page_height+'mm',"");LODOP.ADD_PRINT_IMAGE(0,0,"100%","100%","<img border='0' src='"+url+"'  />");LODOP.SET_PRINT_STYLEA(0,"HtmWaitMilSecs",100);//延迟100毫秒LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//图片显示原大小console.log(33333)LODOP.PREVIEW();// LODOP.PRINT();}})</script>
</body></html>

Lodop官方文档:在线样例

Lodop打印控件初始化过程相关推荐

  1. lodop打印html内容,Lodop打印控件在页面如何使用

    Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后 用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...

  2. 使用LODOP打印控件实现打印功能的解决方案

    项目中有很多打印功能,一开始使用浏览器自带的打印功能,发现在不同的浏览打印效果上有着较大的差异,最终选择了LODOP打印控件来实现,记录下实现的大体思路. 1. LODOP的优势: 功能丰富:LODO ...

  3. Lodop打印控件在平台中的应用

    一.什么是lodop lodop取意自"load or print",是一款优秀的Web打印控件. 在B/S系统中,传统打印控件总是"页面看到什么才能打印什么" ...

  4. 关于Lodop打印控件

    Vue项目中开发Lodop打印控件操作笔记. 1.进入官网下载控件,然后安装. 1 http://www.lodop.net/ 2.安装包里面有LodopFuncs.js,推荐使用官方js,网上也有很 ...

  5. uniapp中使用lodop打印控件实现app广域、局域网打印功能,亲测可用

    文章目录 前言 一.本文目的 二.使用步骤 1.准备工作 2.引入库文件 3.页面使用 总结 前言 在项目中使用了lodop控件,然而蛋疼的发现这玩意uniapp app端不能直接使用,在vip售后群 ...

  6. Lodop打印控件指定打印任务某几页

    使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...

  7. lodop打印控件的使用

    web打印解决方案 1.生成打印模版(网页),使用window.print()预览打印模版,在浏览器中打印 2.导出网页为excel文件,详见网页导出为excel 3.使用lodop打印控件 第一种方 ...

  8. Lodop打印控件里SET_PRINT_STYLE和SET_PRINT_STYLEA

    LODOP.SET_PRINT_STYLE 对该语句后面的打印项样式设置效果. LODOP.SET_PRINT_STYLEA 针对第一个参数设置的打印项样式设置效果. 这两个语句,作用范围不同. 在设 ...

  9. Lodop打印控件使用

    Lodop打印控件简单使用方法  1.安装.  2.调用LodopFuncs.js文件.  3.增加OBJECT对象  <script language="javascript&quo ...

最新文章

  1. Scrapy爬虫及案例剖析
  2. java某人有5张三分_能不能帮我做一下题目啊,JAVA的,请求高手解答!
  3. ECMAScript6入门教程(一)
  4. 音视频技术开发周刊 | 180
  5. 湖人豪华助教团散伙 德帅身边恐仅剩两名帮手
  6. linux创建目录的语句,Linux的 文件 和 目录 管理(基本语句)
  7. 在unity 中,使用http请求,下载文件到可读可写路径
  8. C++是一种糟糕的语言 Linux之父炮轰C++
  9. 筝乐音乐播放器——黑马koltin影音笔记1
  10. mysql前179天_做up主179天的经历
  11. java中static修饰函数_详解java中static关键词的作用
  12. 【前端技术】一篇文章搞掂:微信小程序
  13. D511 外置功放软件烧录方法
  14. 深入理解Attention及变种(四)
  15. python利用you-get下载视频
  16. 驾照新规4月起实施:有驾驶经历者可直接申请考试
  17. 清、浊、爆破音的时域与频域特性
  18. JavaSE--day01(基础知识)
  19. matlab误差分析,数值分析之MATLAB实验一误差分析
  20. 影响照片锐度的7个要素

热门文章

  1. webpack web-dev-server 热加载
  2. 前端高频面试题目 -- 15k级别
  3. 做一个简单的java编辑器
  4. Unity 根据所给方向计算Pitch、Yaw、Roll角的大小
  5. 网站使用实体服务器没备案可以么,服务器域名没备案能https吗?
  6. 微信视频全屏问题解决方案
  7. 2022年氟化工艺考试模拟100题及在线模拟考试
  8. “品尝传统美味,感受兰州拉面工艺——食家巷‘一窝丝’推荐”
  9. 阿里云1核1G什么意思
  10. 【阅读论文神器】Zotero使用入门