Vue 集成报表工具Lodop

大大大绵羊
1,531 阅读6分钟

Lodop是一款web端的报表打印控件, 可以在web端调用诸多跟打印相关的设置及功能，通过它我们可以在web端实现报表设计、打印，获取打印机状态、可用打印机等等功能

文章后面还会结合 Socket.io、Puppeteer 来实现一个打印服务, 供微信小程序、H5端进行报表打印、获取打印机实时状态等功能。

1. Lodop的安装

Lodop的web端控件使用原理, 是通过本地服务提供的Api接口,来调用打印机相关的一些服务，因而需要在本地安装一个Lodop服务

2. Vue项目中引入Lodop的Web Js来调用Lodop服务

由于Vue项目的Js引入是基于ES6的, 所以我们将Lodop的web js改造下, 使其支持通过 import的方式引入

同时还删减掉了一些没必要的提示, 请根据实际情况保留

/* eslint-disable no-unused-vars */
// ==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState

// ==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
  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(以防其中一个被占):==
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement

  var JS1 = document.createElement('script')
  JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
  head.insertBefore(JS1, head.firstChild)

  var JS2 = document.createElement('script')
  JS2.src = 'http://localhost:18000/CLodopfuncs.js?priority=0'
  head.insertBefore(JS2, head.firstChild)

  CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i))

  if (JS1.attachEvent) {
    CLodopJsState = 'loading'
    var onChange = function() {
      if (window.event.srcElement.readyState == 'loaded') { CLodopJsState = 'complete' }
    }
    JS1.attachEvent('onreadystatechange', onChange)
    JS2.attachEvent('onreadystatechange', onChange)
  }
}

// ==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"
  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"
  var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>"
  var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）"
  var strCLodopInstall_3 = '，成功后请刷新本页面。</font>'
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
  var LODOP
  try {
    var ua = navigator.userAgent
    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
    if (needCLodop()) {
      try {
        // eslint-disable-next-line no-undef
        LODOP = getCLodop()

      // eslint-disable-next-line no-empty
      } catch (err) {}
      if (!LODOP && (document.readyState !== 'complete' || (isIE && CLodopJsState == 'loading'))) {
        alert('网页还没下载完毕，请稍等一下再操作.')
        return
      }
      if (!LODOP) {
        // document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
        return
      } else {
        // eslint-disable-next-line no-undef
        if (CLODOP.CVERSION < '3.0.9.3') {
          // 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 }
    // }
    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==

    // =======================================================
    return LODOP
  } catch (err) {
    alert('getLodop出错:' + err)
  }
}
export { getLodop }

3. Lodop的使用例子

总的来说, 使用Lodop打印大致分为下面几个步骤。

  1. 创建打印任务：设置一些纸张大小啊，任务名称等基本参数
  2. 生成打印内容: 打印的内容有很多种方式
  • 打印设计： 官网例子 通过Lodop内置的报表设计工具生成的JS片段, 下面也会以这种方式写例子
  • 纯Web端打印：官网例子
  • 等等

3. 预览或直接打印

3.1 如何引入Lodop的Web Js

import { getLodop } from '@/utils/LodopFuncs'

3.2 创建打印任务

/**
 * 创建打印任务
 * @param {*} taskName  任务名称
 * @param {*} width 纸张宽度
 * @param {*} height 纸张高度
 */
const createTask = ({ taskName, width, height }, options) => {
  const config = Object.assign({}, {
    taskName,
    width,
    height,
  }, options)
  const LODOP = getLodop() 
  // 打印检查安装，必装
  CheckIsInstall(LODOP)
  // 任务名称
  LODOP.PRINT_INIT(config.taskName)
  // 展示模式
  LODOP.SET_SHOW_MODE('NP_NO_RESULT', true)
  // 纸张大小  intOrient,intPageWidth,intPageHeight,strPageName
  LODOP.SET_PRINT_PAGESIZE(0, width, height, 'Note')
  return LODOP
}

/**
 * 打印检查安装，必装
 */
const CheckIsInstall = (LODOP) => {
  try {
    if (LODOP.VERSION) {
      if (LODOP.CVERSION) {
        // alert('当前有WEB打印服务C-Lodop可用!\n C-Lodop版本:' + LODOP.CVERSION + '(内含Lodop' + LODOP.VERSION + ')') } else { alert('本机已成功安装了Lodop控件！\n 版本号:' + LODOP.VERSION)
        // Vue.prototype.$message('当前有WEB打印服务C-Lodop可用' + LODOP.CVERSION)
      }
    }
  } catch (err) {
    Vue.prototype.$message.error('请先安装C-Lodop')
    window.open('http://www.lodop.net/download.html')
  }
}

3.3 生成打印内容

本例子中我们使用Lodop自带的打印设计, 生成一段测试代码

![](https://pic2.zhimg.com/80/v2-58124d0d3c867b151a1dbee0bddbff3d_720w.jpg)
LODOP.PRINT_INITA(0,0,760,321,"打印控件功能演示_Lodop功能_在线编辑获得程序代码");
LODOP.ADD_PRINT_TEXT(10,50,175,30,"先加的内容");

这个例子简单的生成了一个文本。

3.4 预览和打印

紧接着最后就可以调用预览或者直接打印的命令

  • 预览命令 LODOP.PREVIEW()

预览是会先弹出预览界面, 在这个界面上就可以点击打印等操作

  • 直接打印命令 LODOP.PRINT()

3.5 大致的代码

import { getLodop } from '@/utils/LodopFuncs' 
/**
 * 创建打印任务
 * @param {*} taskName  任务名称
 * @param {*} width 纸张宽度
 * @param {*} height 纸张高度
 */
const createTask = ({ taskName, width, height }, options) => {
  const config = Object.assign({}, {
    taskName,
    width,
    height,
  }, options)
  const LODOP = getLodop() 
  // 打印检查安装，必装
  CheckIsInstall(LODOP)
  // 任务名称
  LODOP.PRINT_INIT(config.taskName)
  // 展示模式
  LODOP.SET_SHOW_MODE('NP_NO_RESULT', true)
  // 纸张大小  intOrient,intPageWidth,intPageHeight,strPageName
  LODOP.SET_PRINT_PAGESIZE(0, width, height, 'Note')
  return LODOP
}

/**
 * 打印检查安装，必装
 */
const CheckIsInstall = (LODOP) => {
  try {
    if (LODOP.VERSION) {
      if (LODOP.CVERSION) {
        // alert('当前有WEB打印服务C-Lodop可用!\n C-Lodop版本:' + LODOP.CVERSION + '(内含Lodop' + LODOP.VERSION + ')') } else { alert('本机已成功安装了Lodop控件！\n 版本号:' + LODOP.VERSION)
        // Vue.prototype.$message('当前有WEB打印服务C-Lodop可用' + LODOP.CVERSION)
      }
    }
  } catch (err) {
    Vue.prototype.$message.error('请先安装C-Lodop')
    window.open('http://www.lodop.net/download.html')
  }
}
/**
* 创建打印内容
*/
const createContent = (LODOP ) => {
  LODOP.PRINT_INITA(0,0,760,321,"打印控件功能演示_Lodop功能_在线编辑获得程序代码");
  LODOP.ADD_PRINT_TEXT(10,50,175,30,"先加的内容");
}
const init = ()=>{
 const LODOP = createTask({
    taskName: '标签',
    width: '800',
    height: '300'
  }, options)
 // 创建打印内容
 createContent(LODOP)
 // 预览内容
 LODOP.PREVIEW()
}
init()

4. Lodop如何实现分页（打印多张）

实现分页的方式很简单, 只需在创建打印内容步骤后面增加 LODOP.NewPage()

/**
* 创建打印内容
*/
const createContent = (LODOP ) => {
  LODOP.PRINT_INITA(0,0,760,321,"打印控件功能演示_Lodop功能_在线编辑获得程序代码");
  LODOP.ADD_PRINT_TEXT(10,50,175,30,"先加的内容");
  LODOP.NewPage()
}

这样你可以改造 createContent 函数, 传入数据，到这里进行判断、循环渲染等复杂逻辑，下面是实现伪代码

/**
* 创建打印内容
*/
const createContent = (LODOP, data = []) => {
  data.forEach(v=>{
   LODOP.PRINT_INITA(0,0,760,321,"打印控件功能演示_Lodop功能_在线编辑获得程序代码");
   LODOP.ADD_PRINT_TEXT(10,50,175,30,v.text);
   LODOP.NewPage()
  })
}
avatar
文章
阅读
粉丝