VUE使用lodop实现前端打印页面指定内容

关注

原创最新推荐文章于 2026-03-30 10:27:02 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

vue+lodop单独打印和全部打印以及批量打印打印实现表格格式 1.下载lodop插件下载后得到LodopFuncs.js 放到工具utils（任意文件夹）文件夹。2.下载斑马打印机驱动（找厂商提供或者官网找到对应型号下载即可）下载好之后选择安装。情况：斑马打印机 lodop第三方打印插件 vue3 表格形式包含二维码。4.效果预览标签大小和适配自己调整为标签纸大小适应即可。3.准备就绪代码如下。阅读详情

最近做项目，遇到一个需要页面无需下载在线打印Word的功能，最初尝试直接打印页面，会导致将整个页面都打印出来，不符合要求。后期客户要求要使用lodop，这样打印与页面展示Word两个方面都是未知的东西，那就查资料设计实现方式吧，这里重点记录打印的实现，总的来说有三步。

1.去lodop的下载地址下载安装适合自己电脑的插件，传送门：http://www.c-lodop.com/download.html

注意！这里我认为该官网下载有个不友好的地方

打印组件，即一些样例，需要在win32版的这个这个发行包中下载，也就是解压出来的这些东西

但是插件的运行程序却需要使用win64版的，这让我一开始绕了一圈，不知道是操作不对还是确实这样，有大神可以指导一下。下载后点击安转这个执行程序即可成功安装插件。

2.将js引入我们的前端项目，我这里引入了两个，直接上图上代码：

lodop.js:

var CreatedOKLodop7766 = null

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] >= 41 || 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] >= 41) 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)
}

// ====获取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 =
    "<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行安装</a>,安装后请刷新页面。</font>"
  const strCLodopUpdate =
    "<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行升级</a>,升级后请刷新页面。</font>"
  let LODOP
  try {
    const isIE =
      navigator.userAgent.indexOf('MSIE') >= 0 ||
      navigator.userAgent.indexOf('Trident') >= 0
    if (needCLodop()) {
      try {
        // eslint-disable-next-line no-undef
        LODOP = getCLodop()
        // eslint-disable-next-line no-empty
      } catch (err) {}
      if (!LODOP && document.readyState !== 'complete') {
        alert('C-Lodop没准备好，请稍后再试！')
        return
      }
      if (!LODOP) {
        if (isIE) document.write(strCLodopInstall)
        else {
          document.body.innerHTML =
            strCLodopInstall + document.body.innerHTML
        }
        return
      } else {
        // eslint-disable-next-line no-undef
        if (CLODOP.CVERSION < '3.0.4.3') {
          if (isIE) document.write(strCLodopUpdate)
          else {
            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 && navigator.userAgent.indexOf('x64') >= 0
      // =====如果页面有Lodop就直接使用，没有则新建:==========
      // eslint-disable-next-line eqeqeq
      if (oOBJECT != undefined || oEMBED != undefined) {
        if (isIE) LODOP = oOBJECT
        else LODOP = oEMBED
      } else if (CreatedOKLodop7766 == null) {
        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)
        CreatedOKLodop7766 = LODOP
      } else LODOP = CreatedOKLodop7766
      // =====Lodop插件未安装时提示下载地址:==========
      if (LODOP == null || typeof LODOP.VERSION === 'undefined') {
        if (navigator.userAgent.indexOf('Chrome') >= 0) {
          document.body.innerHTML =
            strHtmChrome + document.body.innerHTML
        }
        if (navigator.userAgent.indexOf('Firefox') >= 0) {
          document.body.innerHTML =
            strHtmFireFox + document.body.innerHTML
        }
        if (is64IE) document.write(strHtm64_Install)
        else if (isIE) document.write(strHtmInstall)
        else {
          document.body.innerHTML =
            strHtmInstall + document.body.innerHTML
        }
        return LODOP
      }
    }
    if (LODOP.VERSION < '6.2.2.3') {
      if (!needCLodop()) {
        if (is64IE) document.write(strHtm64_Update)
        else if (isIE) document.write(strHtmUpdate)
        else {
          document.body.innerHTML =
            strHtmUpdate + document.body.innerHTML
        }
      }
      return LODOP
    }
    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):===

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

doPrint.js:

import { getLodop } from '@t/lodop' // 这块就是引用的上面一大坨暴露出来的方法喽

const PrintAccount = (qrTitle, codetype, url, code) => {
  const qrAccount = `${url}/#/?type=${codetype}&code=${code}`
  // 调用打印对象
  let LODOP
  // eslint-disable-next-line prefer-const
  LODOP = getLodop()
  // 打印页面配置
  LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
  LODOP.SET_PRINT_PAGESIZE(3, '5.7cm', '2cm', 2)

  // 条码内容
  LODOP.ADD_PRINT_TEXT(3, 32, 127, 20, qrTitle)
  LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15)
  LODOP.ADD_PRINT_BARCODE(26, 15, 170, 147, 'QRCode', qrAccount)
  // LODOP.ADD_PRINT_TEXT(159, 11, 163, 42, qrAccount)
  // LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11)
}

export { PrintAccount }

3.代码引用：

页面不用下载实现打印Word，这里我采用的方法是页面画出Word架构，动态替换关键字，然后打印该页面。

画好页面模板后，引用刚才新建的js方法，给出一个打印按钮，给按钮赋值一个click操作即可。

直接上预览打印与最终实现打印的vue页面代码：

画要被打印的Word框架：

引用打印js方法：

打印按钮的click方法与实现：

整篇原始代码：

<template>
  <div class="app-container">
      <el-button id='yulan' type="info"@click="printPdf" :tbId="tbId" v-print="'#printMe'">打印</el-button>
    <!--startprint-->
      <div id="printMe">
        <div class="text general"><p class="MsoNormal" style="text-align: center;"><strong><span
          style="font-size: 12.0pt; font-family: 宋体;">民事起诉状<span lang="EN-US"></span></span></strong></p>
          <p class="MsoNormal" style="text-align: center;"><strong><span style="font-size: 12.0pt; font-family: 宋体;"
                                                                         lang="EN-US">&nbsp;</span></strong></p>
          <p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">原告<span lang="EN-US">XXX</span>，女，<span
            lang="EN-US">XXXX</span>年<span lang="EN-US">X</span>月<span lang="EN-US">X</span>日出生，身份证号码<span lang="EN-US">XXXXXXXXXXXX</span>，<span
            lang="EN-US">X</span>族，住<span lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span
            lang="EN-US">XX</span>区<span
            lang="EN-US">XX</span>路<span lang="EN-US">XX</span>号。电话：<span lang="EN-US">XXXXXX</span>。<span
            lang="EN-US"></span></span></p>
          <p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">被告<span lang="EN-US">XXX</span>，男，<span
            lang="EN-US">XXXX</span>年<span lang="EN-US">X</span>月<span lang="EN-US">X</span>日出生，身份证号码<span lang="EN-US">XXXXXXXXXXXX</span>，<span
            lang="EN-US">X</span>族，户籍地：<span lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span
            lang="EN-US">XX</span>区<span lang="EN-US">XX</span>路<span lang="EN-US">XX</span>号，现住<span
            lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span lang="EN-US">XX</span>区<span
            lang="EN-US">XX</span>路<span
            lang="EN-US">XX</span>号。电话：<span lang="EN-US">XXXXXX</span>。<span lang="EN-US"></span></span></p>
          <p class="MsoNormal" style="line-height: 150%;"><strong><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">诉讼请求：<span
            lang="EN-US"></span></span></strong>
          </p>
          <p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">1</span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">、请求判令被告归还借款人民币<span lang="EN-US">XXXX</span>元及银行同期存款利息<span
            lang="EN-US">XXX</span>元。<span lang="EN-US"></span></span></p>
          <p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">2</span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">、判被告承担本案的诉讼费用。<span
            lang="EN-US"></span></span>
          </p>
          <p class="MsoNormal" style="line-height: 150%;"><strong><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">事实与理由：<span
            lang="EN-US"></span></span></strong></p>
          <p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">原、被告系朋友关系，<span lang="EN-US">XX</span>年<span
            lang="EN-US">X</span>月<span lang="EN-US">X</span>日被告以资金紧缺为由向原告借款<span lang="EN-US">XXXX</span>元，有被告出具的借条为凭。原告于<span
            lang="EN-US">X</span>年<span lang="EN-US">X</span>月间多次向被告催讨借款，被告均以各种理由推拖，至今尚欠原告借款<span
            lang="EN-US">XXXX</span>元。为了维护自身的合法权益，根据《民事诉讼法》第<span
            lang="EN-US">108</span>条向贵院提起诉讼，请求法院依法判决。<span lang="EN-US"></span></span></p>
          <p class="MsoSalutation" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;&nbsp;&nbsp; </span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">此致<span lang="EN-US"></span></span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">XXX</span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">人民法院<span lang="EN-US"></span></span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;</span></p>
          <p class="MsoNormal" style="text-indent: 28.5pt; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">具状人：<span lang="EN-US">XXX(</span>签名<span
            lang="EN-US">)</span></span></p>
          <p class="MsoNormal" style="text-indent: 28.5pt; line-height: 150%;"><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X</span><span
            style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">年<span lang="EN-US">X</span>月<span
            lang="EN-US">X</span>日<span lang="EN-US"></span></span></p>
          <p><span
            style="font-size: 10.5pt; mso-bidi-font-size: 12.0pt; font-family: &quot;Times New Roman&quot;; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;"
            lang="EN-US"><br style="mso-special-character: line-break; page-break-before: always;"></span></p></div>
      </div>
    <!--endprint-->
  </div>
</template>
<style scoped>
</style>
<script>
   import { getLodop } from '@/utils/lodop'
export default {
  name: 'Register',
  components: {
  },
  data() {
    return {
    }
  },
  created() {
  },
      methods: {
          // 查询数据
          printPdf() {
              let LODOP = getLodop();
              LODOP.PRINT_INIT("起诉书");
              LODOP.SET_PRINT_STYLE("FontSize", 18);
              LODOP.SET_PRINT_STYLE("Bold", 1);
              LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
              LODOP.ADD_PRINT_HTM(88, 200, 350, 600,
                  document.getElementById("printMe").innerHTML);
//    LODOP.PRINT();
              LODOP.PREVIEW();
          },
      }

}

</script>

页面效果：