Preface
This control will be printed directly at the bottom. There will be a watermark at the bottom, which can be solved by purchasing it on the official website;
If you do not want to purchase, you can perform a preview first and the preview box pops up to print;
Please check it out if you need the js file and API documentation you need.
First, you need to introduce files locally or globallyimport {getLodop} from '../../../components/js/LodopFuncs'
Called in the method
print(){ let LODOP = getLodop(); LODOP.PRINT_INITA(0,0,800,1600,"Print library location name"); LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //Set the paper size ();//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 lines LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');//Print QR code LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//QR code style and rules LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");//Select a printer // LODOP.PRINT_DESIGN()//Open settings // (); //Preview () //Print directly },
document
//==This JS is a comprehensive example of loading Lodop plug-in and CLodop services. It can be used directly. It is recommended to integrate it into your own page program after understanding it == var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState; //==Determine whether CLodop is needed (those browsers that do not support plug-ins):==export function needCLodop() { try { var ua = ; if ((/Windows\sPhone/i)) return true; if ((/iPhone|iPod|iPad/i)) return true; if ((/Android/i)) return true; if ((/Edge\D?\d+/i)) return true; var verTrident = (/Trident\D?\d+/i); var verIE = (/MSIE\D?\d+/i); var verOPR = (/OPR\D?\d+/i); var verFF = (/Firefox\D?\d+/i); var x64 = (/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 = (/Chrome\D?\d+/i); if (verChrome) { verChrome = verChrome[0].match(/\d+/); if (verChrome[0] >= 41) return true; } } return false; } catch (err) { return true; } } //==Refer to the main JS of CLodop, use dual ports 8000 and 18000 (in case one of them is occupied):==if (needCLodop()) { var head = || ("head")[0] || ; var JS1 = ("script"); = "http://localhost:8000/?priority=1"; (JS1, ); var JS2 = ("script"); = "http://localhost:18000/?priority=0"; (JS2, ); CLodopIsLocal = !!(( + ).match(/\/\/localho|\/\/127.0.0./i)); if () { CLodopJsState = "loading"; var onChange = function(){ if ( == 'loaded') CLodopJsState = "complete"; }; ('onreadystatechange',onChange); ('onreadystatechange',onChange); } } //==The main process of obtaining the LODOP object, determine whether to install and upgrade:==export function getLodop(oOBJECT, oEMBED) { var strHtmInstall = "<br><font color='#FF00FF'>Print control is not installed! Click here <a href='/download/install_lodop32.exe' target='_self'>Execute the installation</a>. Please refresh the page or re-enter after installation. </font>"; var strHtmUpdate = "<br><font color='#FF00FF'>Print controls need to be upgraded! Click here <a href='/download/install_lodop32.exe' target='_self'>Execute the upgrade</a>, please re-enter after upgrading. </font>"; var strHtm64_Install = "<br><font color='#FF00FF'>Print control is not installed! Click here <a href='/download/install_lodop64.exe' target='_self'>Execute the installation</a>. Please refresh the page or re-enter after installation. </font>"; var strHtm64_Update = "<br><font color='#FF00FF'>Print controls need to be upgraded! Click here <a href='/download/install_lodop64.exe' target='_self'>Execute the upgrade</a>, please re-enter after upgrading. </font>"; var strHtmFireFox = "<br><br><font color='#FF00FF'> (Note: If you have installed the old Lodop attachment npActiveXPLugin, please uninstall it first in [Tools]->Add-on-add-components]->[Extensions])</font>"; var strHtmChrome = "<br><br><font color='#FF00FF'>(If it was normal before, it was only due to browser upgrade or reinstallation, you need to re-execute the above installation)</font>"; var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web printing service CLodop is not installed and started, click here <a href='/download/CLodop_Setup_for_Win32NT.exe' target='_self'>Download and execute installation</a>"; var strCLodopInstall_2 = "<br>(If installed before,Can<a href='/download/:setup' target='_self'>Click here to start again</a>)"; var strCLodopInstall_3 = ", please refresh this page after success.</font>"; var strCLodopUpdate = "<br><font color='#FF00FF'>Web printing service CLodop needs to be upgraded! Click here <a href='/download/CLodop_Setup_for_Win32NT.exe' target='_self'>Execute the upgrade</a>, please refresh the page after upgrading. </font>"; var LODOP; try { var ua = ; var isIE = !!((/MSIE/i)) || !!((/Trident/i)); if (needCLodop()) { try { LODOP = getCLodop(); } catch (err) {} if (!LODOP && ( !== "complete" || (isIE && CLodopJsState == "loading")) ) { alert("The web page has not been downloaded yet, please wait and then operate."); return; } if (!LODOP) { = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + ; return; } else { if ( < "3.0.9.3") { = strCLodopUpdate + ; } if (oEMBED && ) (oEMBED); if (oOBJECT && ) (oOBJECT); } } else { var is64IE = isIE && !!((/x64/i)); //==If the page has Lodop, use it directly, otherwise create a new one:== if (oOBJECT || oEMBED) { if (isIE) LODOP = oOBJECT; else LODOP = oEMBED; } else if (!CreatedOKLodopObject) { LODOP = ("object"); ("width", 0); ("height", 0); ("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;"); if (isIE) ("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA"); else ("type", "application/x-print-lodop"); (LODOP); CreatedOKLodopObject = LODOP; } else LODOP = CreatedOKLodopObject; //== When the Lodop plug-in is not installed, it prompts for download address:== if ((!LODOP) || (!)) { if (('Chrome') >= 0) = strHtmChrome + ; if (('Firefox') >= 0) = strHtmFireFox + ; = (is64IE ? strHtm64_Install : strHtmInstall) + ; return LODOP; } } if ( < "6.2.2.6") { if (!needCLodop()) = (is64IE ? strHtm64_Update : strHtmUpdate) + ; } //===The following blank spaces are suitable for calling unified functions (such as registration statements, language selection, etc.):== //======================================================= return LODOP; } catch (err) { alert("GetLodop error:" + err); } }
This is the article about vue using lodop printing control to achieve browser-compatible printing. For more related vue browser-compatible printing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!