SoFunction
Updated on 2025-04-04

Vue uses lodop printing control to achieve browser-compatible printing

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 globally
import {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 = "&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;br&gt;&lt;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 = "&lt;br&gt;&lt;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 = "&lt;br&gt;(If installed before,Can&lt;a href='/download/:setup' target='_self'&gt;Click here to start again&lt;/a&gt;)";
  var strCLodopInstall_3 = ", please refresh this page after success.</font>";
  var strCLodopUpdate = "&lt;br&gt;&lt;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 &amp;&amp; ( !== "complete" || (isIE &amp;&amp; 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 ( &lt; "3.0.9.3") {
           = strCLodopUpdate + ;
        }
        if (oEMBED &amp;&amp; )
          (oEMBED);
        if (oOBJECT &amp;&amp; )
          (oOBJECT);
      }
    } else {
      var is64IE = isIE &amp;&amp; !!((/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') &gt;= 0)
           = strHtmChrome + ;
        if (('Firefox') &gt;= 0)
           = strHtmFireFox + ;
         = (is64IE ? strHtm64_Install : strHtmInstall) + ;
        return LODOP;
      }
    }
    if ( &lt; "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!