vue使用lodop.js实现前端标签打印

最近做项目, 需要使用到类似顺丰标签的那种标签打印, 需实现单打和批量打印,由于打印的功能是给到国外的同事使用,纸张大小为4*6, 有点特殊,国外打印机和国内的也不一样, 所以调试的时候也是花费了挺多时间, 最后采用的是容大的标签打印机和lodop 的结合使用, 这里重点记录下打印的实现方式。

使用步骤

1、 lodop.js 下载驱动和插件, 传送门:http://www.c-lodop.com/download.html​​​​​​
2、 将下载的插件放在静态文件夹下,其中注意的需要设置下加密秘钥, 可以用于删除水印 (官方代码未写, 需要购买正版获取秘钥), 下面直接贴代码

var CreatedOKLodop7766=null;

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
   
  try{
   
    var ua=navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) !=null) return true;
    if (ua.match(/iPhone|iPod/i) != null) return true;
    if (ua.match(/Android/i) != null) return true;
    if (ua.match(/Edge\D?\d+/i) != null) 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==null)&&(verIE==null)&&(x64!==null))
      return true; else
    if ( verFF !== null) {
   
      verFF = verFF[0].match(/\d+/);
      if ((verFF[0]>= 42)||(x64!==null)) return true;
    } else
    if ( verOPR !== null) {
   
      verOPR = verOPR[0].match(/\d+/);
      if ( verOPR[0] >= 32 ) return true;
    } else
    if ((verTrident==null)&&(verIE==null)) {
   
      var verChrome=ua.match(/Chrome\D?\d+/i);
      if ( verChrome !== null ) {
   
        verChrome = verChrome[0].match(/\d+/);
        if (verChrome[0]>=42) return true;
      };
    };
    return false;
  } catch(err) {
   return true;};
};

//====页面引用CLodop云打印必须的JS文件:====
if (needCLodop()) {
   
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var oscript = document.createElement("script");
  oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
  head.insertBefore( oscript,head.firstChild );

  //引用双端口(8000和18000)避免其中某个被占用:
  oscript = document.createElement("script");
  oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
  head.insertBefore( oscript,head.firstChild );
};

//====获取LODOP对象的主过程:====
export function getLodop(oOBJECT,oEMBED
  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值