C-LODOP打印插件使用

事例为vue中使用安装安装c-lodop插件CLodop_Setup_for_Win32NT.exe 和打印机对应驱动下载引入CLodopfuncs.js至目录下载地址编写LodopFuncs.js用于加载clodop,用于打印前判断c-lodop是否安装和加载注意: 依赖 CLodopfuncs.js,CLodop_Setup_for_Win32NT.exe 注意下面代码中的引入路径, 具体按

金刚腿

8209人浏览 · 2020-08-24 09:32:48

金刚腿 · 2020-08-24 09:32:48 发布

安装

安装CLodop插件CLodop_Setup_for_Win32NT.exe 下载链接
下载引入[CLodopfuncs.js]下载链接

编写`LodopFuncs.js`用于加载`CLodopfuncs.js`,

(直接复制即可)

/**
 * @param jsSrc  远程打印CLodop.js地址
 * @param programSrc  驱动地址
 * @method getLodop  获取LODOP对象
 * **/ 
function LodopFuncs(programSrc, jsSrc){
  this.jsSrc = jsSrc;
  this.programSrc = programSrc;
  this.CLodopJsState = undefined; //加载装填
  this.loadCLodop()
}

//加载C-Lodop
LodopFuncs.prototype.loadCLodop = function() {
  if (this.CLodopJsState == "loading" || this.CLodopJsState == "complete") return;
  this.CLodopJsState = "loading";
  var head =
    document.head ||
    document.getElementsByTagName("head")[0] ||
    document.documentElement;
  var JS1 = document.createElement("script");
  var JS2 = document.createElement("script");
  var JS3 = document.createElement("script");

  //优先调用本地(Localhost)8000端口服务：
  JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=2";

  //如果失败，则调用本地18000端口：
  JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=1";

  //远程打印的核心cldopjs：
  JS3.src = this.jsSrc

  JS1.onload = JS2.onload = JS3.onload = function() {
    this.CLodopJsState = "complete";
  };
  JS1.onerror = JS2.onerror = JS3.onerror = function(evt) {
    this.CLodopJsState = "complete";
  };
  head.insertBefore(JS1, head.firstChild);
  head.insertBefore(JS2, head.firstChild);
  head.insertBefore(JS3, head.firstChild);
}
 
//获取LODOP对象
LodopFuncs.prototype.getLodop = function(oOBJECT, oEMBED) {
  var LODOP;
  try {
    try {
      LODOP = getCLodop(); //获得主对象（getCLodop是在CLodopfuncs.js定义的）

      if (!LODOP && this.CLodopJsState !== "complete") {
        if (this.CLodopJsState == "loading") {
          alert("网页还没下载完毕，请稍等一下再操作");

          return;
        }
      }
    } catch (err) {
      alert(
        "您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印"
      );
      window.open(this.programSrc);
    }

    //清理旧例子的object或embed元素(避免乱提示干扰理解)：
    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);

    return LODOP;
  } catch (err) {
    alert("getLodop出错:" + err);
  }
}

export default LodopFuncs

调用LodopFuncs.js (vue示例)

实例化LodopFuncs, 传入CLodop_Setup_for_Win32NT.exe(安装clodop的驱动文件)资源的地址; 然后暴露getLodop;
注意: 注意参数中的引入路径

// main.js
import LodopFuncs from "@/utils/LodopFuncs";
let Lodop = new LodopFuncs( "../static/CLodop_Setup_for_Win32NT.exe") //第二个参数是远程打印的clodop.js, 可省略,
Vue.prototype.$lodop = Lodop.getLodop.bind(Lodop) //注意需要绑定实例化对象

打印举例

例1: 打印页面中的html

在这里插入图片描述

思路: 通过id获取html, 并复制一份css样式字符串

<style lang="css">
	#printctx2 {
	  width: 100%;
	  table {
	    border: 1px solid #000;
	    width: 100%;
	    td {
	      border-right: 1px solid #000;
	      border-bottom: 1px solid #000;
	      text-align: center;
	    }
	  }
	}
</style>

<template>
<div id="printctx2">
      <table cellspacing="0" cellpadding="0">
        <tbody>
          <tr><td>姓名</td><td>年龄</td><td>血型</td><td>收费项</td></tr>
          <tr><td>老王</td><td>50</td><td>A</td><td>骨折治疗</td></tr>
        </tbody>
      </table>
    </div>
</template>

print(){
	//获取当前页面所有css字符串
    var styleStr = Array.prototype.slice
      .call(document.querySelectorAll("style,link"))
      .reduce((a, i) => {
        a += i.outerHTML;
        return a;
      }, "");

    //获取打印区域的html
    var htmlStr = document.getElementById("printctx2").outerHTML;

    var strHTML = styleStr + htmlStr;

    var LODOP = this.$lodop();

    LODOP.PRINT_INIT("订单XX"); //打印初始化

    // LODOP.SET_PRINTER_INDEX(0); // 选择打印机, 老版本的CLodop驱动中必须加入, 新版可省略

    // LODOP.SET_PRINT_PAGESIZE(0, "25cm", "14cm", ""); //设定纸张大小
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%"); //设置缩放

    LODOP.ADD_PRINT_HTM("20px", "25%", "50%", "100%", strHTML);

    LODOP.PREVIEW(); //预览
}

例2: 热敏打印条形码

思路: JsBarcode生成条形码,绘制在指定大小的区域
依赖JsBarcode canvas插件,需自行下载

import JsBarcode from "jsbarcode";
import { createCanvas } from "canvas";

function print(){
// 打印
      var canvas = createCanvas();
      JsBarcode(canvas, '编号123456', {
        fontSize: 18,
        background: "transparent",
      });

      var LODOP = this.$lodop();

      LODOP.PRINT_INIT("条形码"); //打印初始化
      LODOP.SET_PRINT_STYLE("Alignment", 1); //字靠左
      LODOP.ADD_PRINT_TEXT(
        "4px",
        "4px",
        "1.4cm",
        "15px",
        "老王"
      );
      LODOP.SET_PRINT_STYLE("Alignment", 2); //字居中
      LODOP.ADD_PRINT_TEXT(
        "4px",
        "1.4cm",
        "1.3cm",
        "15px",
        '男'
      );
      LODOP.SET_PRINT_STYLE("Alignment", 3); //字靠右
      LODOP.ADD_PRINT_TEXT(
        "4px",
        "2.7cm",
        "1.2cm",
        "15px",
        "50岁"
      );
      LODOP.SET_PRINT_STYLE("Alignment", 2);  //字居中
      LODOP.ADD_PRINT_TEXT("25mm", "4px", "100%", "15px", "传奇人物");
		//绘制条形码
      LODOP.ADD_PRINT_IMAGE(
        "15px",
        "0",
        "40mm",
        "20mm",
        `<img src="${canvas.toDataURL()}" style="width:40mm;height:20mm">`
      );
      LODOP.SET_PRINT_PAGESIZE(0, "4cm", "3cm", ""); //设定纸张大小

      LODOP.PREVIEW();
   
}