vue使用lodop打印控件实现浏览器兼容打印的方法
前言
此控件直接进行打印底部会有水印，通过官网购买可以解决；
如不想购买，可先执行预览，弹出预览框进行打印；
需要用到的js文件和api文档附后，请注意查看。
首先需要在局部或全局引入LodopFuncs.js文件
import{getLodop}from'../../../components/js/LodopFuncs'
方法中调用
print(){
letLODOP=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("TSCTTP-244Pro");//选择打印机
//LODOP.PRINT_DESIGN()//打开设置
//LODOP.PREVIEW();//预览
LODOP.PRINT()//直接打印
},
LodopFuncs.js文件
//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==
varCreatedOKLodopObject,CLodopIsLocal,CLodopJsState;
//==判断是否需要CLodop(那些不支持插件的浏览器):==
exportfunctionneedCLodop(){
try{
varua=navigator.userAgent;
if(ua.match(/Windows\sPhone/i))
returntrue;
if(ua.match(/iPhone|iPod|iPad/i))
returntrue;
if(ua.match(/Android/i))
returntrue;
if(ua.match(/Edge\D?\d+/i))
returntrue;
varverTrident=ua.match(/Trident\D?\d+/i);
varverIE=ua.match(/MSIE\D?\d+/i);
varverOPR=ua.match(/OPR\D?\d+/i);
varverFF=ua.match(/Firefox\D?\d+/i);
varx64=ua.match(/x64/i);
if((!verTrident)&&(!verIE)&&(x64))
returntrue;
elseif(verFF){
verFF=verFF[0].match(/\d+/);
if((verFF[0]>=41)||(x64))
returntrue;
}elseif(verOPR){
verOPR=verOPR[0].match(/\d+/);
if(verOPR[0]>=32)
returntrue;
}elseif((!verTrident)&&(!verIE)){
varverChrome=ua.match(/Chrome\D?\d+/i);
if(verChrome){
verChrome=verChrome[0].match(/\d+/);
if(verChrome[0]>=41)
returntrue;
}
}
returnfalse;
}catch(err){
returntrue;
}
}
//==引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
if(needCLodop()){
varhead=document.head||document.getElementsByTagName("head")[0]||document.documentElement;
varJS1=document.createElement("script");
JS1.src="http://localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore(JS1,head.firstChild);
varJS2=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";
varonChange=function(){
if(window.event.srcElement.readyState=='loaded')
CLodopJsState="complete";
};
JS1.attachEvent('onreadystatechange',onChange);
JS2.attachEvent('onreadystatechange',onChange);
}
}
//==获取LODOP对象主过程,判断是否安装、需否升级:==
exportfunctiongetLodop(oOBJECT,oEMBED){
varstrHtmInstall="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
varstrHtmUpdate="
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
varstrHtm64_Install="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
varstrHtm64_Update="
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
varstrHtmFireFox="
（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）";
varstrHtmChrome="
(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）";
varstrCLodopInstall_1="
Web打印服务CLodop未安装启动，点击这里下载执行安装";
varstrCLodopInstall_2="
（若此前已安装过，可点这里直接再次启动）";
varstrCLodopInstall_3="，成功后请刷新本页面。";
varstrCLodopUpdate="
Web打印服务CLodop需升级!点击这里执行升级,升级后请刷新页面。";
varLODOP;
try{
varua=navigator.userAgent;
varisIE=!!(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{
varis64IE=isIE&&!!(ua.match(/x64/i));
//==如果页面有Lodop就直接使用,否则新建:==
if(oOBJECT||oEMBED){
if(isIE)
LODOP=oOBJECT;
else
LODOP=oEMBED;
}elseif(!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;
returnLODOP;
}
}
if(LODOP.VERSION<"6.2.2.6"){
if(!needCLodop())
document.body.innerHTML=(is64IE?strHtm64_Update:strHtmUpdate)+document.body.innerHTML;
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
//=======================================================
returnLODOP;
}catch(err){
alert("getLodop出错:"+err);
}
}
到此这篇关于vue使用lodop打印控件实现浏览器兼容打印的文章就介绍到这了,更多相关vue浏览器兼容打印内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！