vue使用lodop打印控件实现浏览器兼容打印
时间:2020-03-24
本文章向大家介绍vue使用lodop打印控件实现浏览器兼容打印,主要包括vue使用lodop打印控件实现浏览器兼容打印使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
- 此控件直接进行打印底部会有水印,通过官网购买可以解决;
- 如不想购买,可先执行预览,弹出预览框进行打印;
- 需要用到的js文件和api文档附后,请注意查看。
首先需要在局部或全局引入LodopFuncs.js文件
import {getLodop} from '../../../components/js/LodopFuncs'
方法中调用
print(){
let LODOP = getLodop();
LODOP.PRINT_INITA(0,0,800,1600,"打印库位名称");
LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //设定纸张大小
LODOP.NewPage();//初始化
LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');//打印文字
LODOP.SET_PRINT_STYLEA(0,"FontSize",30);//字体样式
LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);//打印直线
LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');//打印二维码
LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//二维码样式和规则
LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");//选择打印机
// LODOP.PRINT_DESIGN()//打开设置
// LODOP.PREVIEW(); //预览
LODOP.PRINT() //直接打印
},
LodopFuncs.js文件
//==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
//==判断是否需要CLodop(那些不支持插件的浏览器):==
export 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 head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script");
JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore(JS1, head.firstChild);
var JS2 = document.createElement("script");
JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
head.insertBefore(JS2, head.firstChild);
CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
if (JS1.attachEvent) {
CLodopJsState = "loading";
var onChange = function(){
if (window.event.srcElement.readyState == 'loaded')
CLodopJsState = "complete";
};
JS1.attachEvent('onreadystatechange',onChange);
JS2.attachEvent('onreadystatechange',onChange);
}
}
//==获取LODOP对象主过程,判断是否安装、需否升级:==
export function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='https://wms.warehousing.com/download/install_lodop64.exe' 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='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='https://wms.warehousing.com/download/CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";
var strCLodopInstall_3 = ",成功后请刷新本页面。</font>";
var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
var LODOP;
try {
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" || (isIE && CLodopJsState == "loading")) ) {
alert("网页还没下载完毕,请稍等一下再操作.");
return;
}
if (!LODOP) {
document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
return;
} else {
if (CLODOP.CVERSION < "3.0.9.3") {
document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
}
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;
else
LODOP = oEMBED;
} else if (!CreatedOKLodopObject) {
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");
else
LODOP.setAttribute("type", "application/x-print-lodop");
document.documentElement.appendChild(LODOP);
CreatedOKLodopObject = LODOP;
} else
LODOP = CreatedOKLodopObject;
//==Lodop插件未安装时提示下载地址:==
if ((!LODOP) || (!LODOP.VERSION)) {
if (ua.indexOf('Chrome') >= 0)
document.body.innerHTML = strHtmChrome + document.body.innerHTML;
if (ua.indexOf('Firefox') >= 0)
document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
return LODOP;
}
}
if (LODOP.VERSION < "6.2.2.6") {
if (!needCLodop())
document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
//=======================================================
return LODOP;
} catch (err) {
alert("getLodop出错:" + err);
}
}
lodop技术手册
点击下载 提取码:khc8
原文地址:https://www.cnblogs.com/Apsey/p/12560957.html
- 用Python实现微信接口(二)
- (63) 实用序列化: JSON/XML/MessagePack / 计算机程序的思维逻辑
- Quartz作业调度框架
- Oracle系统表整理+常用SQL语句收集
- Webpack 实用技巧高效实战
- oracle表空间不足相关问题解决办法
- 手工打造分布式爬虫
- (64) 常见文件类型处理: 属性文件/CSV/EXCEL/HTML/压缩文件 / 计算机程序的思维逻辑
- org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts2.dispatcher.
- Python协程演进过程
- Android TV开发简介
- (59) 文件和目录操作 / 计算机程序的思维逻辑
- Rdseed与SAC的安装
- Python爬虫大战京东商城
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RESTful API 设计最佳实践
- Spring 是如何解决循环依赖的?
- 移动webhead参数
- 看了这篇泛型,下次设计链表别傻傻的用int 表示node节点的值了
- 标准TensorFlow格式 TFRecords
- LeetCode 05最长回文子串
- 基于NCNN的3x3可分离卷积再思考盒子滤波
- [译]Buidler 新手教程
- tf.train.shuffle_batch函数解析
- 网页小图标Favicon
- ASP.net Core MVC项目给js文件添加版本号
- 多目标优化非支配关系实现
- linux之shell
- linux下的定时任务处理
- 10 个用纯 Javascript 实现的好用插件