LODOP打印vue和 js

最新推荐文章于 2024-03-04 15:58:58 发布

原创最新推荐文章于 2024-03-04 15:58:58 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#lodop #vue #js #javascript

lodop打印专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Lodop打印控件的功能和使用方法，包括初始化、设定纸张大小、添加文本、表格和图形等操作，以及如何进行打印预览、直接打印和打印维护。同时，文章还提供了代码示例，展示了如何利用Lodop实现复杂的打印需求。

LODOP 和 C-LODOP 打印
官方网址

官网说明如下

Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现
复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：
● PRINT_INIT(strPrintTaskName)打印初始化
● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
● ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
● ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
● SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格

● PREVIEW打印预览
● PRINT直接打印
● PRINT_SETUP打印维护
● PRINT_DESIGN打印设计

安装

下载最新版本地址
下载完成后解压安装如下程序:
下载解压后

修改js

官方提供的js文件,只需要进行简单的修改就可以。(我这里只修改这么多。然后写了一个如果客户端未安装或版本低，提供下载的方法(暂时不是很重要))

在这里插入图片描述

代码(测试例子)

lodopFuns.js 就是我们修改的js文件，printUtils.js在里面写样式(测试用的js，随便写几个样式)

代码是其中的一个样式。

// 引入 lodopFuns.js 的 getLodop 方法
import { getLodop } from '@/utils/lodop/lodopFuns'

// strPrintTaskName:打印名称  printDate:打印日期  printModel:打印模块  date:数据
const libraryBarcode = (strPrintTaskName, printModel, data) => {
  const LODOP = getLodop()
  LODOP.PRINT_INIT(strPrintTaskName)
   LODOP.ADD_PRINT_LINE(35, 15, 34, 515, 0, 2)
   // dates() 这里是我获取日期的方法 可以忽略 也可以用官方提供的
    LODOP.ADD_PRINT_TEXT(12, 39, 90, 20, dates())
    LODOP.SET_PRINT_STYLEA(0, 'FontName', '楷体')
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
    LODOP.ADD_PRINT_TEXT(12, 256, 144, 20, printModel)
    LODOP.SET_PRINT_STYLEA(0, 'FontName', '楷体')
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
    LODOP.ADD_PRINT_LINE(35, 15, 215, 16, 0, 2)
    LODOP.ADD_PRINT_LINE(214, 15, 215, 515, 0, 2)
    LODOP.ADD_PRINT_LINE(214, 514, 34, 515, 0, 2)
    LODOP.ADD_PRINT_LINE(214, 186, 34, 187, 0, 2)
    LODOP.ADD_PRINT_TEXT(58, 184, 88, 24, '物料编码：')
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    LODOP.ADD_PRINT_LINE(96, 186, 95, 514, 0, 2)
    LODOP.ADD_PRINT_LINE(157, 188, 156, 514, 0, 2)
    LODOP.ADD_PRINT_TEXT(119, 184, 88, 24, '物料名称：')
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    LODOP.ADD_PRINT_TEXT(176, 184, 88, 24, '规格尺寸：')
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    // 这里 A  是用户 写入的数据 物料编码(数据)
    LODOP.ADD_PRINT_TEXT(58, 272, 235, 24,A)
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    // 这里 “B” 代表的是用户写入的数据 （物料名称(数据)）
    LODOP.ADD_PRINT_TEXT(119, 272, 235, 24, B)
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    // 这里 “C” 代表 用户写入的数据 （规格尺寸） 
    LODOP.ADD_PRINT_TEXT(176, 272, 235, 24,C)
    LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
    LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
    // 打印条码 12345646635345 // 自己设置的数据
    LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, 'QRCode', ‘12345646635345’)
    
   LODOP.SET_PREVIEW_WINDOW('1', '0', '0', '900px', '600px', '') // 预览窗口

  // LODOP.PRINT() // 直接打印
  // LODOP.PREVIEW() // 打印预览
  LODOP.PRINT_SETUP() // 打印维护
  // LODOP.PRINT_DESIGN() // 打印设计
}
export { libraryBarcode }

PRINT_INIT(strPrintTaskName) 打印初始化

// intTop:距离顶部高度； intLeft :距离左边高度 intWidth：宽度 intHeight :高度 strContent:文本
ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项

LODOP.PRINT() // 直接打印(无窗口)
LODOP.PREVIEW() // 打印预览窗口
LODOP.PRINT_SETUP() // 打印维护窗口
LODOP.PRINT_DESIGN() // 打印设计窗口

//12345646635345 设置的数据 QRCode 类型 44, 21, 169, 173 上，左，宽，高
LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, ‘QRCode’, ‘12345646635345’) //分页

说明效果图

LODOP.PRINT_DESIGN() // 打印设计窗口 (这是设计的窗口)
在这里插入图片描述
LODOP.PREVIEW() // 打印预览窗口（这是预览的窗口）

大致是这个样子。。。。。。。。。。。。。。。。。。。。。。。。。

当然还可以自己写页面，然后通过官方提供的把h5写入到打印中。不过样式会丢需要把
样式写进去，然后就可以啊。。。。。。。。。。。。。。。。。。。。。。。。。。。。

模板设计

这里可以进行模板设计生成以上代码
模板设计
比如：进入模板设计:点击这个小图标可以进入“生成代码”可以生成那堆样式代码(可以根据需求先练习下画画) 生成后放入代码中就行啦
在这里插入图片描述

分页

分页的话可以进行强制分页：
// one
LODOP.NEWPAGEA()
// two
LODOP.NEWPAGE()
以上两个分页都可以,
简单区分:[one]分页不会覆盖数据(即第一页数据没展示完到第二页不会覆盖第二页的内容) 。
[two]分页会覆盖数据(即第一页数据没展示完到第二页会覆盖第二页的内容) 。
大致这个意思吧。

然后进入分页打印的话，可以进行for循环然后调用【one】【two】分页，最后弹出等等等等等。。。。。。。。。。。。。。。。
或者写 pageSize 啥的等等。。。。。。。。。。。。。
第一种例子：

*//先for*
 for (let i = 0; i < 2; i++) {
    // 打印条码
    LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, 'QRCode', '231231231')
    LODOP.ADD_PRINT_TEXT('96%', '85%', 200, 22, '第' + 1 + '页/共' + 2 + '页')
    //分页
    LODOP.NEWPAGEA()
  }
  *//最后*
  LODOP.PREVIEW()

嗯，貌似这个d样子。。。。。。。。。。。。。。。。

差不多就那么多吧，根据需求自己改写就可以啦。
最后说一下注册，呐呐呐，看官网：
添加链接描述

有错误的地方欢迎给俺指一下，俺也是第一次用这玩意。

附上简单修改的lodopFun.js

import { MessageBox } from 'element-ui'

// eslint-disable-next-line no-unused-vars
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState

// ==判断是否需要CLodop(那些不支持插件的浏览器):==
export 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(以防其中一个被占):==
export function loadCLodop() {
  // eslint-disable-next-line eqeqeq
  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' }
  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 = "<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='http://192.168.3.21:80/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 && CLodopJsState !== 'complete') {
        // eslint-disable-next-line eqeqeq
        if (CLodopJsState == 'loading') {
          this.$message({
            message: '网页还没下载完毕，请稍等一下再操作.',
            type: 'warning',
            duration: 1000
          })
        } else {
          this.$message({
            message: '没有加载CLodop的主js，请先调用loadCLodop过程.',
            type: 'warning',
            duration: 1000
          })
        }
        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 < '4.0.9.6') {
          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) {
    MessageBox({
      title: '提示',
      type: 'warning',
      showCancelButton: 'true',
      message: '您还未安装打印控件,点击确认下载打印控件,安装后成功后刷新页面即可打印',
      callback: res => {
        if (res === 'confirm') {
          loadLodop()
        }
      }
    })
  }
}
// 这里可以写 下载地址 ，测试就写了官网
export function loadLodop() {
  window.open('http://www.lodop.net/download.html')
}