The Method of Using lodop Print Control to Realize Browser Compatible Printing in vue
- 2021-10-25 05:57:22
- OfStack
Preface
This control will have a watermark at the bottom of printing directly, which can be solved by purchasing in official website;
If you don't want to buy it, you can preview it first and pop up the preview box for printing;
The required js files and api documents are attached, please pay attention to them.
First, you need to import the LodopFuncs. js file locally or globally
import {getLodop} from '../../../components/js/LodopFuncs'
Method is called in the
print(){
let LODOP = getLodop();
LODOP.PRINT_INITA(0,0,800,1600," Print location name ");
LODOP.SET_PRINT_PAGESIZE(1,700,500,"") // Set paper size
LODOP.NewPage();// Initialization
LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');// Print text
LODOP.SET_PRINT_STYLEA(0,"FontSize",30);// Font style
LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);// Print straight line
LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');// Print 2 Dimension code
LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//2 Dimension code styles and rules
LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");// Select a printer
// LODOP.PRINT_DESIGN()// Open Settings
// LODOP.PREVIEW(); // Preview
LODOP.PRINT() // Direct printing
},
LodopFuncs. js file
//== Ben JS Is loaded Lodop Plug-ins and CLodop Comprehensive example of services, can be used directly, it is recommended to understand after melting into their own page procedures ==
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
//== Determine whether it is necessary CLodop( Browsers that do not support plug-ins ):==
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;
}
}
//== Quote CLodop Lord of JS, With dual ports 8000 And 18000( To prevent it 1 Occupied ):==
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);
}
}
//== Get LODOP Object main procedure , Determine whether to install or upgrade :==
export function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = "<br><font color='#FF00FF'> Print control is not installed ! Click here <a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'> Perform an installation </a>, Please refresh the page or re-enter after installation. </font>";
var strHtmUpdate = "<br><font color='#FF00FF'> Print control needs to be upgraded ! Click here <a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'> Perform an upgrade </a>, Please re-enter after upgrading. </font>";
var strHtm64_Install = "<br><font color='#FF00FF'> Print control is not installed ! Click here <a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'> Perform an installation </a>, Please refresh the page or re-enter after installation. </font>";
var strHtm64_Update = "<br><font color='#FF00FF'> Print control needs to be upgraded ! Click here <a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'> Perform an upgrade </a>, Please re-enter after upgrading. </font>";
var strHtmFireFox = "<br><br><font color='#FF00FF'> (Note: If installed Lodop Old attachment npActiveXPLugin, Please click in Tools -> "Add-ons" -> Unload it first in "Extension") </font>";
var strHtmChrome = "<br><br><font color='#FF00FF'>( If it is normal before, it is only a problem due to browser upgrade or reinstallation, and the above installation needs to be re-performed) </font>";
var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web Print service CLodop Startup is not installed, click here <a href='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'> Download Perform Installation </a>";
var strCLodopInstall_2 = "<br> (If it has been installed before, you can <a href='https://wms.warehousing.com/download/CLodop.protocol:setup' target='_self'> Click here to start again directly </a> ) ";
var strCLodopInstall_3 = " Please refresh this page after success. </font>";
var strCLodopUpdate = "<br><font color='#FF00FF'>Web Print service CLodop Need to be upgraded ! Click here <a href='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'> Perform an upgrade </a>, Please refresh the page after upgrading. </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(" The web page has not been downloaded yet, please wait a moment 1 Next and then operate .");
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));
//== If the page has Lodop Just use it directly , Otherwise create a new :==
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 Prompt for download address when plug-in is not installed :==
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;
}
//=== The following white space is suitable for calling the system 1 Function ( Such as registration statements, language selection, and so on ):==
//=======================================================
return LODOP;
} catch (err) {
alert("getLodop Error :" + err);
}
}