Community Learn Tools Library Leisure
search
English
Home > Web Front-end > Vue.js > An example explains how Vue implements printing receipts

An example explains how Vue implements printing receipts

藏色散人
Release： 2022-11-13 16:46:05
forward
2360 people have browsed it

Vue can also print receipts? So how to implement it specifically? Let me take you through a detailed understanding of how to print receipts by installing the lodop printing control. This article is attached with detailed example code. I hope it will be helpful to friends who need it. Welcome to learn!

An example explains how Vue implements printing receipts

Vue implements printing receipts

lodop printing control

Install lodop printing Control (learning video sharing: vue video tutorial) 

lodop地址: http://www.c-lodop.com/download.html
Copy after login

Introduce LodopFuncs.js into the project

//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==

//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:

var  MainJS  =  "CLodopfuncs.js",

 URL_WS1  =  "ws://localhost:8000/"  +  MainJS,                //ws用8000/18000

 URL_WS2  =  "ws://localhost:18000/"  +  MainJS,

 URL_HTTP1  =  "http://localhost:8000/"  +  MainJS,              //http用8000/18000

 URL_HTTP2  =  "http://localhost:18000/"  +  MainJS,

 URL_HTTP3  =  "https://localhost.lodop.net:8443/"  +  MainJS; //https用8000/8443

var  CreatedOKLodopObject, CLodopIsLocal, LoadJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==

export  function  needCLodop() {

 try {

 var  ua  =  navigator.userAgent;

 if (ua.match(/Windows\sPhone/i) ||

 ua.match(/iPhone|iPod|iPad/i) ||

 ua.match(/Android/i) ||

 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;

    }

}

//==检查加载成功与否，如没成功则用http(s)再试==

//==低版本CLODOP6.561/Lodop7.043及前)用本方法==

export  function  checkOrTryHttp() {

 if (window.getCLodop) {

 LoadJsState  =  "complete";

 return  true;

    }

 if (LoadJsState  ==  "loadingB"  ||  LoadJsState  ==  "complete") return;

 LoadJsState  =  "loadingB";

 var  head  =  document.head  ||  document.getElementsByTagName("head")[0] ||  document.documentElement;

 var  JS1  =  document.createElement("script")

, JS2  =  document.createElement("script")

, JS3  =  document.createElement("script");

 JS1.src  =  URL_HTTP1;

 JS2.src  =  URL_HTTP2;

 JS3.src  =  URL_HTTP3;

 JS1.onload  =  JS2.onload  =  JS3.onload  =  JS2.onerror  =  JS3.onerror  =  function () { LoadJsState  =  "complete"; }

 JS1.onerror  =  function (e) {

 if (window.location.protocol  !==  'https:')

 head.insertBefore(JS2, head.firstChild); else

 head.insertBefore(JS3, head.firstChild);

    }

 head.insertBefore(JS1, head.firstChild);

}

//==加载Lodop对象的主过程:==

(function  loadCLodop() {

 if (!needCLodop()) return;

 CLodopIsLocal  =  !!((URL_WS1  +  URL_WS2).match(/\/\/localho|\/\/127.0.0./i));

 LoadJsState  =  "loadingA";

 if (!window.WebSocket  &&  window.MozWebSocket) window.WebSocket  =  window.MozWebSocket;

 //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:

 try {

 var  WSK1  =  new  WebSocket(URL_WS1);

 WSK1.onopen  =  function (e) { setTimeout("checkOrTryHttp();", 200); }

 WSK1.onmessage  =  function (e) { if (!window.getCLodop) eval(e.data); }

 WSK1.onerror  =  function (e) {

 var  WSK2  =  new  WebSocket(URL_WS2);

 WSK2.onopen  =  function (e) { setTimeout("checkOrTryHttp();", 200); }

 WSK2.onmessage  =  function (e) { if (!window.getCLodop) eval(e.data); }

 WSK2.onerror  =  function (e) { checkOrTryHttp(); }

        }

} catch (e) {

 checkOrTryHttp();

    }

})();

//==获取LODOP对象主过程,判断是否安装、需否升级:==

export  function  getLodop(oOBJECT, oEMBED) {

 var  strFontTag  =  "<br><font color=&#39;#FF00FF&#39;>打印控件";

 var  strLodopInstall  =  strFontTag  +  "未安装!点击这里<a href=&#39;install_lodop32.exe&#39; target=&#39;_self&#39;>执行安装</a>";

 var  strLodopUpdate  =  strFontTag  +  "需要升级!点击这里<a href=&#39;install_lodop32.exe&#39; target=&#39;_self&#39;>执行升级</a>";

 var  strLodop64Install  =  strFontTag  +  "未安装!点击这里<a href=&#39;install_lodop64.exe&#39; target=&#39;_self&#39;>执行安装</a>";

 var  strLodop64Update  =  strFontTag  +  "需要升级!点击这里<a href=&#39;install_lodop64.exe&#39; target=&#39;_self&#39;>执行升级</a>";

 var  strCLodopInstallA  =  "<br><font color=&#39;#FF00FF&#39;>Web打印服务CLodop未安装启动，点击这里<a href=&#39;CLodop_Setup_for_Win32NT.exe&#39; target=&#39;_self&#39;>下载执行安装</a>";

 var  strCLodopInstallB  =  "<br>（若此前已安装过，可<a href=&#39;CLodop.protocol:setup&#39; target=&#39;_self&#39;>点这里直接再次启动</a>）";

 var  strCLodopUpdate  =  "<br><font color=&#39;#FF00FF&#39;>Web打印服务CLodop需升级!点击这里<a href=&#39;CLodop_Setup_for_Win32NT.exe&#39; target=&#39;_self&#39;>执行升级</a>";

 var  strLodop7FontTag  =  "<br><font color=&#39;#FF00FF&#39;>Web打印服务Lodop7";

 var  strLodop7HrefX86  =  "点击这里<a href=&#39;Lodop7_Linux_X86_64.tar.gz&#39; target=&#39;_self&#39;>下载安装</a>(下载后解压，点击lodop文件开始执行)";

 var  strLodop7HrefARM  =  "点击这里<a href=&#39;Lodop7_Linux_ARM64.tar.gz&#39;  target=&#39;_self&#39;>下载安装</a>(下载后解压，点击lodop文件开始执行)";

 var  strLodop7Install_X86  =  strLodop7FontTag  +  "未安装启动，"  +  strLodop7HrefX86;

 var  strLodop7Install_ARM  =  strLodop7FontTag  +  "未安装启动，"  +  strLodop7HrefARM;

 var  strLodop7Update_X86  =  strLodop7FontTag  +  "需升级，"  +  strLodop7HrefX86;

 var  strLodop7Update_ARM  =  strLodop7FontTag  +  "需升级，"  +  strLodop7HrefARM;

 var  strInstallOK  =  "，成功后请刷新本页面或重启浏览器。</font>";

 var  LODOP;

 try {

 var  isWinIE  = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));

 var  isWinIE64  =  isWinIE  && (/x64/i.test(navigator.userAgent));

 var  isLinuxX86  = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));

 var  isLinuxARM  = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));

 if (needCLodop() ||  isLinuxX86  ||  isLinuxARM) {

 try {

 LODOP  = window.getCLodop();

} catch (err) { }

 if (!LODOP  &&  LoadJsState  !==  "complete") {

 if (!LoadJsState)

 alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程."); else

 alert("网页还没下载完毕，请稍等一下再操作.");

 return;

            }

 var  strAlertMessage;

 if (!LODOP) {

 if (isLinuxX86)

 strAlertMessage  =  strLodop7Install_X86;

 else  if (isLinuxARM)

 strAlertMessage  =  strLodop7Install_ARM;

 else

 strAlertMessage  =  strCLodopInstallA  + (CLodopIsLocal  ?  strCLodopInstallB  :  "");

 document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;

 return;

} else {

 if (isLinuxX86  &&  LODOP.CVERSION <  "7.0.4.3")

 strAlertMessage  =  strLodop7Update_X86;

 else  if (isLinuxARM  &&  LODOP.CVERSION <  "7.0.4.3")

 strAlertMessage  =  strLodop7Update_ARM;

 else  if (CLODOP.CVERSION <  "6.5.7.0")

 strAlertMessage  =  strCLodopUpdate;

 if (strAlertMessage)

 document.body.innerHTML  =  strAlertMessage  +  strInstallOK  +  document.body.innerHTML;

            }

} else {

 //==如果页面有Lodop插件就直接使用,否则新建:==

 if (oOBJECT  ||  oEMBED) {

 if (isWinIE)

 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 (isWinIE)

 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)) {

 document.body.innerHTML  = (isWinIE64  ?  strLodop64Install  :  strLodopInstall) +  strInstallOK  +  document.body.innerHTML;

 return  LODOP;

            }

 if (LODOP.VERSION <  "6.2.2.6") {

 document.body.innerHTML  = (isWinIE64  ?  strLodop64Update  :  strLodopUpdate) +  strInstallOK  +  document.body.innerHTML;

            }

        }

 //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================

 //===============================================================================

 return  LODOP;

} catch (err) {

 alert("getLodop出错:"  +  err);

    }

}
Copy after login

Remove the test Version

myPreview1() {

 // this.CreateImage();

 // this.LODOP.PRINT();

 let  LODOP  =  getLodop();

 console.log(&#39; LODOP&#39;, LODOP)

 var  strHTML  =  document.getElementById("box").innerHTML;

 LODOP.PRINT_INIT("")

 LODOP.SET_LICENSES("", "EE0887D00FCC7D29375A695F728489A6", "C94CEE276DB2187AE6B65D56B3FC2848", ""); //去掉测试版本

 // LODOP.SET_PRINT_PAGESIZE(3, "80mm", "10mm", "CreateCustomPage"); //80打印机不需要加这行

 LODOP.SET_PRINT_STYLE("FontSize", 15); // 设置打印字体

 LODOP.SET_PRINT_STYLE("Bold", 1); // 设置加粗

 LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Height:90%");

 LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");

 LODOP.ADD_PRINT_HTM(10, 10, "90%", "70%", strHTML);

 LODOP.PRINT();//

 // this.LODOP.PREVIEW()

        },
Copy after login

The above is the detailed content of An example explains how Vue implements printing receipts. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
vue
source：learnku.com
Previous article：Learn more about dynamic components in Vue Next article：Detailed step-by-step explanation of how Vue implements voice broadcast (with code)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Using variables defined in methods in templates This is my first time using Vue (v2 not v3) and I've been trying to use variables inside t...
From 2024-04-06 18:10:25
0
2
513
Create users in Vue using Firebase without logging in I have created a form to create user profiles. But whenever I create a user I have a probl...
From 2024-04-06 14:20:12
0
1
514
Solving Vue3 webcomponents production build issues I'm trying to migrate my vue2web components to vue3, although the problem arises when I cr...
From 2024-04-06 12:43:37
0
1
473
vue vee-validate captures the problem of date picker selection The v-model binding on my datepicker field is not working properly. When you make a select...
From 2024-04-06 11:38:56
0
1
510
Is there a way to set the route prop in vue? I want to navigate to a specific tab in the page this.$router.push({name:"AdminNotifi...
From 2024-04-06 11:35:59
0
1
456
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template