vue使用Clodop插件打印

一、前往lodop官网，下载插件，http://www.lodop.net/index.html 

 这里下载的window64位的，将插件安装好，运行，会看到

点击‘去了解C-Lodop>>’,会跳转至使用说明页面，在这个页面里，可以打印测试页面，以验证插件正常连接打印机。

 引入项目

第一种、可以直接将script标签放入vue的head中，在项目运行时自动加载。

第二种、也可以将js文件下载至本地，通过import引入，前提是将CLODOP对象export出来。

这里使用第三种方法，即动态加载方法,根据当前系统的环境及文件状态加载

代码：CLodopfuncs.js

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState

// ==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop () {
  console.log('检测当前环境,判断是否需要CLodop(那些不支持插件的浏览器)')
  try {
    var ua = navigator.userAgent
    if (ua.match(/Windows\sPhone/i)) { return true }
    if (ua.match(/iPhone|iPod|iPad/i)) { return true }
    if (ua.match(/Android/i)) { return true }
    if (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
  }
}

// ==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
function loadCLodop () {
  console.log('可以加载CLodop，开始加载js,端口为8000和18000')
  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')
  JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
  JS2.src = 'http://localhost:18000/CLodopfuncs.js'
  JS1.onload = JS2.onload = function () { CLodopJsState = 'complete' }
  JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = 'complete' }
  // 加入header
  head.insertBefore(JS1, head.firstChild)
  head.insertBefore(JS2, head.firstChild)
  CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i))
}

// 初始化，检测当前环境
if (needCLodop()) { loadCLodop() }// 加载

// ==获取LODOP对象主过程,判断是否安装、需否升级:==

export function getLodop (oOBJECT, oEMBED) {
  var strHtmInstall = "
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"
  var strHtmUpdate = "
打印控件需要升级!点击这里执行升级,升级后请重新进入。"
  var strHtm64_Install = "
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"
  var strHtm64_Update = "
打印控件需要升级!点击这里执行升级,升级后请重新进入。"
  var strHtmFireFox = "

（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）"
  var strHtmChrome = "

(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）"
  var strCLodopInstall_1 = "
Web打印服务CLodop未安装启动，点击这里下载执行安装"
  var strCLodopInstall_2 = "
（若此前已安装过，可点这里直接再次启动）"
  var strCLodopInstall_3 = '，成功后请刷新本页面。'
  var strCLodopUpdate = "
Web打印服务CLodop需升级!点击这里执行升级,升级后请刷新页面。"
  var LODOP
  try {
    var ua = navigator.userAgent
    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
    if (needCLodop()) {
      try {
        LODOP = getCLodop()
      } catch (err) {}
      if (!LODOP && CLodopJsState !== 'complete') {
        if (CLodopJsState == 'loading') alert('网页还没下载完毕，请稍等一下再操作.'); else alert('没有加载CLodop的主js，请先调用loadCLodop过程.')
        return
      }
      if (!LODOP) {
        document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
        return
      } else {
        if (CLODOP.CVERSION < '4.0.9.9') {
          document.body.innerHTML = strCLodopUpdate + document.body.innerHTML
        }
        if (oEMBED && oEMBED.parentNode) { oEMBED.parentNode.removeChild(oEMBED) }
        if (oOBJECT && oOBJECT.parentNode) { oOBJECT.parentNode.removeChild(oOBJECT) }
      }
    } else {
      var is64IE = isIE && !!(ua.match(/x64/i))
      // ==如果页面有Lodop就直接使用,否则新建:==
      if (oOBJECT || oEMBED) {
        if (isIE) { 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 (isIE) { 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)) {
        if (ua.indexOf('Chrome') >= 0) { document.body.innerHTML = strHtmChrome + document.body.innerHTML }
        if (ua.indexOf('Firefox') >= 0) { document.body.innerHTML = strHtmFireFox + document.body.innerHTML }
        document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML
        return LODOP
      }
    }
    if (LODOP.VERSION < '6.2.2.6') {
      if (!needCLodop()) { document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML }
    }
    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
    LODOP.SET_LICENSES('', '13528A153BAEE3A0254B9507DCDE2839', 'EDE92F75B6A3D917F65910', '')
    // =======================================================
    return LODOP
  } catch (err) {
    alert('getLodop出错:' + err)
  }
}

在项目中引入：

运行项目

页面仅显示一个按钮

此时打开元素查看器，可以看到CLodopfuncs.js已被加载

 

 点击打印按钮，会调用打印机

 为了防止真正打印，这里将代码改为了打印预览，实际每调用一次会打印一次，也可以边请求后台数据边打，只要有纸，可以一直打，我最多打了二百多张纸