vue 实现静默打印、打印预览

近日遇到需求,需要实现静默打印,经过多方百度,发现了露肚皮(Lodop)这个第三方,官网demo
我们新建一个print文件将他做成组件引入
print.js

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

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时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
//主JS文件“CLodopfuncs.js”是固定文件名,其内容是动态的,与当前打印环境有关:
export function loadCLodop() {
  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')

  if (window.location.protocol == 'https:') {
    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'
    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'
  } else {
    JS1.src = 'http://localhost:8000/CLodopfuncs.js'
    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='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 {
        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.1.4.5') {
          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)
  }
}

然后 根据需求开始画(可以传入base64),我这里是自己画的。(上面这一段可以直接无脑复制,下面需要根据自己的需求来)

import { getLodop } from './print'
const print = (data, type) => {
 let LODOP = getLodop()
    LODOP.PRINT_INIT('')
    LODOP.ADD_PRINT_RECT(0, 0, '10cm', '10cm', 0, 1) //(Top, Left, Width, Height,intLineStyle, intLineWidth)
    LODOP.ADD_PRINT_RECT(0, 0, '10cm', '3.5cm', 0, 1)
    LODOP.ADD_PRINT_RECT('3.5cm', 0, '10cm', '3cm', 0, 1)
    LODOP.ADD_PRINT_RECT('6.5cm', 0, '10cm', '2.5cm', 0, 1)
    LODOP.SET_PRINT_STYLE('FontSize', 12)
    LODOP.SET_PRINT_STYLE('Bold', 1)
    //SET_PRINT_STYLE:设置纯文本打印项风格,格式:SET_PRINT_STYLE(strStyleName,varStyleValue)。
    //strStyleName:打印风格名,设定纯文本风格名称及其含义如下:|varStyleValue:打印风格值,相关值如下:
    //“FontName”: 字体名称。|值: 字符型,与操作系统字体名一致,缺省是“宋体”。
    //“FontSize”: 字体大小。|值:数值型,单位是pt,缺省值是9,可以含小数,如13.5。
    //“FontColor”: 字体颜色。|值:整数或字符型,如同CSS的color。
    //“Bold”: 是否粗体。|值:数字型,1代表粗体,0代表非粗体,缺省值是0。
    //“Italic”: 是否斜体。|值:数字型,1代表斜体,0代表非斜体,缺省值是0。
    //“Underline”: 是否下滑线。|值:数字型,1代表有下划线,0代表无下划线,缺省值是0。
    //“Alignment”: 内容左右靠齐方式。|值:数字型,1--左靠齐 2--居中 3--右靠齐,缺省值是1。
    //“Angle”: 旋转角度。|值:数字型,逆时针旋转角度数,单位是度,0度表示不旋转
    // LODOP.PREVIEW() //打印预览
    LODOP.PRINT()
    // LODOP.PRINT_SETUP();//打印维护
}
export default print

我这里直接挂载全局调用即可,具体方法大家根据自己的需求去封装,这里详细参数可以自行查阅。
(可以通过打印维护去调整样式,设置好默认打印机就可以实现静默打印)
不知道为什么,这里的引入会报错,虽然并不影响,但看着很难受,如果大家有时间深入研究欢迎交流~

 if (window.location.protocol == 'https:') {
    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'
    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'
  } else {
    JS1.src = 'http://localhost:8000/CLodopfuncs.js'
    JS2.src = 'http://localhost:18000/CLodopfuncs.js'
  }
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue前端实现静默打印的方法可以通过以下步骤实现: 1. 首先,引入一个隐藏的iframe元素,并将其设置为不可见。这可以通过在Vue组件的`template`中添加一个`<iframe>`元素,并设置属性`style="display: none;"`来实现。 2. 在需要进行静默打印的逻辑代码中,通过获取该iframe元素的引用,并设置其src属性为需要打印的内容。这可以通过在Vue组件的`methods`中添加一个方法,然后在需要打印的地方调用该方法来实现。 3. 通过在iframe元素的`load`事件中执行打印操作,实现静默打印。在Vue组件的`mounted`生命周期钩子中,监听iframe元素的`load`事件,并在事件触发时执行打印操作。 综上所述,以下是一个示例的Vue组件代码,实现静默打印的功能: ```vue <template> <div> <iframe ref="printIframe" style="display: none;"></iframe> <button @click="handlePrint">打印</button> </div> </template> <script> export default { methods: { handlePrint() { const printContent = '<h1>要打印的内容</h1>'; // 替换成需要打印的内容 const iframe = this.$refs.printIframe; iframe.srcdoc = printContent; } }, mounted() { const iframe = this.$refs.printIframe; iframe.onload = () => { iframe.contentWindow.print(); }; } }; </script> ``` 在上面的示例中,`handlePrint`方法用于设置iframe元素的srcdoc属性为需要打印的内容。`mounted`生命周期钩子监听iframe元素的load事件,事件触发后执行iframe.contentWindow.print()操作进行静默打印。通过点击"打印"按钮,即可实现静默打印功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值