第十八篇难点突破之-VUE中使用 C-LODOP 实现模板的套打

最新推荐文章于 2024-08-10 21:30:56 发布

置顶

小熊猫Yzt_199626

最新推荐文章于 2024-08-10 21:30:56 发布

阅读量8.1k

点赞数 9

分类专栏：难点突破之-VUE中使用 C-LODOP 实现模板的套打文章标签：云打印 vue.js javascript

本文链接：https://blog.csdn.net/Yzt_199626/article/details/118091950

版权

本文详细介绍了如何使用C-LODOP套打控件实现模板打印，包括下载安装、引用JS文件、调用方法以及一些注意事项。通过设置背景图、表格大小、打印预览等功能，展示了如何动态填充内容并完成打印操作。此外，还提供了一个完整的DEMO案例供参考。

摘要由CSDN通过智能技术生成

前言: 目前模板套打的工具不多，个人参与的项目恰好需要使用到模板套打功能，于是查了一下最后选择了 C-LODOP 。其常见的功能都覆盖到了，尤其用户本地直接接打印机打印是免费的。

套打：简单的理解就是，纸上的网格线、表头等信息都有了，现在要做的就是将内容动态填充上去。如：快递单、银行小票等。

先看下大致效果：

1.未检测到 c-lodop 服务，进行提示

2. 打印预览页面(蓝色字体是动态打上去的，表格绿色字体等是图片背景)

下面来说下大致的实现步骤，以及遇到的一些难点：

1.先下载安装 C-LODOP

c-lodop下载地址

文件不大，解压之后，点击如下 exe 文件启用服务。

2. 将上述的 LodopFuncs.js 文件放到工程某个文件下

并对该文件做一点点小的处理，以下是自己的处理。

该插件可直接放在前端工程文件下，当提示的时候，用户可以直接下载。

.....

// 下载loadLodop
function loadLodop() {
  const lodopurl = '../lodop/CLodop_Setup_for_Win32NT.exe'
  window.location.href= lodopurl
}

......

/* eslint-disable */
import { MessageBox } from 'element-ui'
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)
}

// 下载loadLodop
function loadLodop() {
  const lodopurl = '../lodop/CLodop_Setup_for_Win32NT.exe'
  window.location.href= lodopurl
}

//====获取LODOP对象的主过程：====
export 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