C-LODOP打印插件使用

事例为vue中使用

安装

安装c-lodop插件CLodop_Setup_for_Win32NT.exe 和 打印机对应驱动
下载引入CLodopfuncs.js至目录
下载地址

编写LodopFuncs.js用于加载clodop,

用于打印前判断c-lodop是否安装和加载
注意: 依赖 CLodopfuncs.js,CLodop_Setup_for_Win32NT.exe 注意下面代码中的引入路径, 具体按照实际情况修改

var CLodopJsState;

//====加载C-Lodop的过程(用script元素动态引用主文件CLodopfuncs.js)====
function loadCLodop() {
  if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
  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";

  //最后如本地无C-Lodop时，则演示通过本服务远程打印：
  JS3.src = "/CLodopfuncs.js";      //---------------------此处为本地依赖的CLodopfuncs.js

  JS1.onload = JS2.onload = JS3.onload = function() {
    CLodopJsState = "complete";
  };
  JS1.onerror = JS2.onerror = JS3.onerror = function(evt) {
    CLodopJsState = "complete";
  };
  head.insertBefore(JS1, head.firstChild);
  head.insertBefore(JS2, head.firstChild);
  // head.insertBefore(JS3, head.firstChild);
}

//本例演示所有浏览器都调用C-Lodop:
function needCLodop() {
  return true;
}

//执行加载:
if (needCLodop()) {
  loadCLodop();
}

//====获取LODOP对象的主过程：====
function getLodop(oOBJECT, oEMBED) {
  var LODOP;
  try {
    try {
      LODOP = getCLodop(); //获得主对象（getCLodop是在CLodopfuncs.js定义的）

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

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

    //清理旧例子的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);
  }
}

// 下载loadLodop
function loadLodop() {
  window.open("../../static/CLodop_Setup_for_Win32NT.exe");   //---------------------此处为本地依赖的CLodop安装插件
}

export { getLodop }; //导出getLodop

挂载clodop打印插件,暴露$lodop, (此处为vue中的使用,具体视情况省略)

import { getLodop } from "@/utils/LodopFuncs";
Vue.prototype.$lodop = getLodop

使用

例: 打印如下 表格内容

<!-- 不需要scoped属性, 保证打印样式-->
<style lang="css">
	.tablebox{
		color: green;
		background: black
	}
</style>

<template>
<div id="printctx">
	<table class="tablebox">
		<tbody>
			<tr>
				<td>姓名</td> <td>年龄</td> <td>血型</td> <td>收费项</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

this.$nextTick为vue中DOM异步更新之后的操作, 具体看情况而定, 可省略;

• 思路: 手下获取id = printctx的html, 获取并拷贝一份当前样式字符串, 通过传入LODOP.ADD_PRINT_HTM函数中生成打印区域
• 注意点: 例子中打印为id = printctx的区域, 这时编写样式的style标签, 不能加上scoped属性, 否则打印样式丢失

this.$nextTick(()=>{
        var styleStr = Array.prototype.slice
          .call(document.querySelectorAll("style,link"))
          .reduce((a, i) => {
            a += i.outerHTML;
            return a;
          }, "");
        var htmlStr = document.getElementById("printctx").outerHTML;

        var strHTML = styleStr + htmlStr;
        console.log(strHTML);

        var LODOP = this.$lodop();

        // console.log(strHTML)
        LODOP.PRINT_INIT("订单"); //打印初始化

        LODOP.SET_PRINTER_INDEX(0);
        //LODOP.SET_PRINT_STYLE("FontSize", 12); //设置对象风格
        // LODOP.SET_PRINT_STYLE("Bold", 1); 设置对象风格

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

        // LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口

        LODOP.ADD_PRINT_HTM("1cm", "1cm", "24cm", "14cm", strHTML);

        LODOP.PREVIEW();

      })

打印参考

• C-Lodop打印事例