CLodop设置打印

m0_71331177

已于 2023-09-28 10:18:31 修改

阅读量5.1k

点赞数

分类专栏：前端_常用封装插件打印文章标签： javascript 前端 css

于 2023-08-22 14:21:44 首次发布

本文链接：https://blog.youkuaiyun.com/m0_71331177/article/details/132426849

版权

前端_常用封装同时被 3 个专栏收录

3 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

打印

1 篇文章

订阅专栏

一、要点：

1、CLodop可同时控制多台打印机打印，根据打印机名称或直接设置默认打印机（-1）
LODOP.SET_PRINTER_INDEX('Lenovo LJ2405');//指定为打印机，-1为默认打印机
LODOP.SET_PRINTER_INDEX(-1);//指定为打印机，-1为默认打印机

2、CLodop可同一个页面多次注册/设置打印内容--原生HTML
LODOP.ADD_PRINT_HTM('0mm', '3mm', '80mm', '55mm', innerHTML); //增加超文本打印项-打印内容

3、CLodop可设置预览或直接打印
LODOP.PRINT() //直接打印
// LODOP.PREVIEW(); // 打印预览

二、内容

—— Clodop 官方JS文件，通过官网下载获取

三、案例参考

//PrintInnerHTML.ts

//PrintInnerHTML.ts
// 版号打印
export function traySnInnerHTML(item, model) {   //--①抛出HTML内容
  return `
  <div style='width: 74mm;'>
    <br><br><br><br>
    <span style="width: 74mm;display: flex;justify-content: space-between;">
      <span>批号：${item.traySn}</span>
      <span>打印人：${model.realname}</span>
    </span>
    <span style="font-size: 20px; font-weight: bolder;margin-top: -20px">客户：${item.consumerPhone}</span
    ><br/>
    <span style="font-size: 20px; font-weight: bolder;margin-top: -20px">货品：${item.goodsName}</span
    ><br/>
    <span style="width:74mm;display: flex;justify-content: space-between;font-size: 20px; font-weight: bolder;">
      <span>数量：${item.actualQuantity}</span>
      <span>库位：${item.location}</span>
    </span>
    <span style="font-size: 14px;">规格：${item.goodsSpec}</span><br />
    <span style="font-size: 14px;">打印日期：${item.printDate}</span>  
  </div>
  `;
}

//PrintTray.vue

<script lang="ts">
    import { getLodop } from '/@/cLodop/LodopFuncs.js'; //--②引入CLodop官方JS文件用来注册；
	import { traySnInnerHTML, receiptInnerHTML} from "./components/PrintInnerHTML"; //--②引入HTML内容
</script>
export default {
    setup() {
        // 版号打印
        const printTickets = () => {
          let traySnPrintLength = ref<string>('')
          traySnPrintLength.value = (model.value.details.length * 60) + 'mm';
          model.value.details.map((i) => {
            traySnPrint(i.traySn, traySnInnerHTML(i, model.value), traySnPrintLength.value); //--④调用
          });
        };
        const strPName=ref<string>('');//获取打印机名称--多台同类型打印机（不同地区用不同打印机）
      	const printerCheck=()=>{
        	strPName.value=getLodop().GET_PRINTER_NAME(-1)
      	};
        const traySnPrint = (traySn, innerHTML, traySnPrintLength) => {
          let LODOP = getLodop(); //--③注册并配置CLodop内容，注意！要先引入
          if (!LODOP) {
            message.error('版号打印插件未安装，请先下载');
            return;
          }
          printerCheck();
          LODOP.SET_LICENSES('', 'AF8A5800B819CC7AE0BCF67B925D7BEE', 'C94CEE276DB2187AE6B65D56B3FC2848', ''); //设置软件产品注册信息--购买后再改这里的注册码
          LODOP.PRINT_INIT('打印版号:' + traySn); //打印任务名
          LODOP.SET_PRINT_PAGESIZE(1, '80mm', traySnPrintLength); // 纸张方向大小
          //不同打印机名字，对应不同的打印内容或者打印的文本适配
          //注意！代码位置必须在中间，否则文本内容无法渲染到
          if(strPName.value=='Xprinter XP-320B'){ //打印机名称为"Xprinter XP-320B"这个的时候，调用下面的打印内容
            LODOP.ADD_PRINT_BARCODE('1mm', '4mm', '80mm', '16mm', '128Auto', traySn); //增加条形码
            LODOP.ADD_PRINT_HTM('1mm', '0mm', '80mm', '60mm', innerHTML); //增加超文本打印项-打印内容
          }
          if(strPName.value=='w80'){//打印机名称为"w80"这个的时候，调用下面的打印内容
            LODOP.ADD_PRINT_BARCODE('1mm', '9mm', '39.4%', '16mm', '128Auto', traySn); //增加条形码
            LODOP.ADD_PRINT_HTM('0mm', '3mm', '80mm', '55mm', innerHTML); //增加超文本打印项-打印内容
         }
          let checkPri=LODOP.SET_PRINTER_INDEX(-1);//指定为打印机，-1为默认打印机--返回值是true和false，可用来判断打印机是否存在
          LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, ''); // 演示设置各种样式的打印预览窗口：
          if(checkPri==true){ //打印机存在
              LODOP.PRINT(); //直接打印
              // LODOP.PREVIEW(); // 打印预览
          }else{//打印机不存在
              message.error('未找到版号打印机，请确认打印机是否连接！');
          }
          //LODOP.SET_PRINT_STYLE("FontSize",16);//设置打印项风格
          //LODOP.SET_PRINT_STYLE("Bold",1);//设置打印项风格
          // LODOP.SET_PRINT_STYLEA(0,"QRCodeVersion",14); //纸张缩放
          // LODOP.PRINT_DESIGN() // 设计模式
          // LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW',true);//打印后自动关闭预览
        };
    }
}

//LodopFuncs.js

//==本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(那些不支持插件的浏览器):==
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及前)用本方法==
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='#FF00FF'>打印控件";
    var strLodopInstall = strFontTag + "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";
    var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";
    var strLodop64Install = strFontTag + "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";
    var strLodop64Update = strFontTag + "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";
    var strCLodopInstallA = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
    var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";
    var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";
    var strLodop7HrefX86 = "点击这里<a href='Lodop7_Linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
    var strLodop7HrefARM = "点击这里<a href='Lodop7_Linux_ARM64.tar.gz'  target='_self'>下载安装</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.1")
                    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);
    }
}