C-Lodop云打印插件实现打印HTML字符串

Dragon_xjy
1,096 阅读3分钟

前端开发中，实现打印功能的方式有很多种，原生打印，以及通过第三方插件实现打印。今天实现一个C-Lodop插件打印HTML的功能。

原生打印

浏览器提供了原生的打印功能，允许开发者直接调用浏览器的打印对话框，有如下两种方式。

使用 window.print() 方法

浏览器提供了 window.print() 方法，可以直接调出打印对话框。这是最简单的打印方式。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>原生打印</title>
</head>
<style>
        @media print {

                /* 隐藏不需要打印的元素 */
                .no-print {
                        display: none;
                }

                /* 调整打印内容的样式 */
                .print-content {
                        font-size: 12pt;
                        color: black;
                }
        }
</style>

<body>
        <div class="no-print">
                这是不需要打印的内容。
        </div>
        <div class="print-content">
                这是需要打印的内容。
        </div>
        <button class="btn">打印</button>
        <script>
                const btn = document.querySelector('.btn');
                btn.addEventListener('click', () =>{
                        window.print()
                })
        </script>
</body>

</html>

上述代码没有对打印内容特殊处理，直接打印整个网页，通过CSS的 @media print 规则，可以为打印内容定义专门的样式。这样可以隐藏不需要打印的元素，或者调整打印内容的布局。

使用 <iframe> 打印

这种情况下，就可以自定义想要打印的内容了，更加灵活多变了。

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>原生打印</title>
</head>

<body>
        <button onclick="printUsingIframe()">使用iframe打印</button>

        <script>
                const printUsingIframe = () => {
                        // 创建一个iframe
                        const iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        document.body.appendChild(iframe);

                        // 在iframe中写入需要打印的内容
                        const content = `
            <h1>这是需要打印的内容</h1>
            <p>这是一段示例文本。</p>
        `;
                        iframe.contentDocument.write(content);
                        iframe.contentDocument.close();

                        // 调用iframe的打印功能
                        iframe.contentWindow.print();

                        // 移除iframe
                        document.body.removeChild(iframe);
                }
        </script>
</body>

</html>

预览图如下：

image.png

C-Lodop云打印插件方法

很多情况下，原生打印可扩张性太低，我们需要自定义样式结构从而满足需求。

介绍

官方地址 Lodop和C-Lodop官网主站

安装

首先需要下载插件

image.png 安装成功后

image.png

image.png

导入js文件

image.png 代码附上

//= =本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==

import { ElMessageBox } from 'element-plus'

// 用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
const MainJS = 'CLodopfuncs.js'
const URL_HTTP1 = `http://localhost:8000/${MainJS}` // http用8000/18000
const URL_HTTP2 = `http://localhost:18000/${MainJS}`
const URL_HTTP3 = `https://localhost.lodop.net:8443/${MainJS}` // https用8000/8443

let LoadJsState

/* eslint-disable */
var CreatedOKLodop7766 = null

//====判断是否需要安装CLodop云打印服务器:====
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
  }
}
//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {
  if (window.getCLodop) {
    LoadJsState = 'complete'
    return true
  }
  if (LoadJsState == 'loadingB' || LoadJsState == 'complete') return
  LoadJsState = 'loadingB'
  var head =
    document.head || document.getElementsByTagName('head')[0] || document.documentElement
  var JS1 = document.createElement('script'),
    JS2 = document.createElement('script'),
    JS3 = document.createElement('script')
  JS1.src = URL_HTTP1
  JS2.src = URL_HTTP2
  JS3.src = URL_HTTP3
  JS1.onload =
    JS2.onload =
    JS3.onload =
    JS2.onerror =
    JS3.onerror =
      function () {
        LoadJsState = 'complete'
      }
  JS1.onerror = function (e) {
    if (window.location.protocol !== 'https:') head.insertBefore(JS2, head.firstChild)
    else head.insertBefore(JS3, head.firstChild)
  }
  head.insertBefore(JS1, head.firstChild)
}

//====页面引用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 =
    'http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip'
  window.location.href = lodopurl
}

//====获取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 =
    "<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>"
  var strCLodopUpdate =
    "<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
  var LODOP
  try {
    var isIE =
      navigator.userAgent.indexOf('MSIE') >= 0 ||
      navigator.userAgent.indexOf('Trident') >= 0
    if (needCLodop()) {
      try {
        LODOP = getCLodop()
      } catch (err) {
        ElMessageBox({
          title: '温馨提示',
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: '去下载',
          cancelButtonText: '取消',
          message:
            '检测到您还未安装C-LODOP套打控件,请确认启用后再打印。或您可点击下载该套打控件，安装成功后刷新页面再进行打印',
          callback: (res: any) => {
            if (res === 'confirm') {
              loadLodop()
            }
          },
        })
      }
      if (!LODOP && document.readyState !== 'complete') {
        alert('C-Lodop没准备好，请稍后再试！')
        return
      }
      if (!LODOP) {
        // if (isIE) document.write(strCLodopInstall); else
        // document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
        // return;
      } else {
        if (CLODOP.CVERSION < '3.0.0.2') {
          if (isIE) document.write(strCLodopUpdate)
          else
            document.documentElement.innerHTML =
              strCLodopUpdate + document.documentElement.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就直接使用，没有则新建:==========
      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.documentElement.innerHTML =
            strHtmChrome + document.documentElement.innerHTML
        if (navigator.userAgent.indexOf('Firefox') >= 0)
          document.documentElement.innerHTML =
            strHtmFireFox + document.documentElement.innerHTML
        if (is64IE) document.write(strHtm64_Install)
        else if (isIE) document.write(strHtmInstall)
        else
          document.documentElement.innerHTML =
            strHtmInstall + document.documentElement.innerHTML
        return LODOP
      }
    }
    if (LODOP.VERSION < '6.0') {
      if (!needCLodop()) {
        if (is64IE) document.write(strHtm64_Update)
        else if (isIE) document.write(strHtmUpdate)
        else
          document.documentElement.innerHTML =
            strHtmUpdate + document.documentElement.innerHTML
      }
      return LODOP
    }
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
    //LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","");

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

export { needCLodop, getLodop }

使用

初始化打印函数

// 初始化打印
  // 打印机列表
  const printList = ref<{ label: string; value: number }[]>([])
  const initPrint = () => {
    printList.value = []
    const LODOP = getLodop()
    if (!LODOP) {
      ElMessage.warning('插件未加载！')
      return
    }
    // 获取可打印的设备
    const count = LODOP.GET_PRINTER_COUNT()
    for (let i = 0; i < count; i++) {
      const label = LODOP.GET_PRINTER_NAME(i)
      printList.value.push({ label, value: i })
    }
  }

如上述代码printList为所有可打印的设备

开始打印

// 准备打印
const printContent = () => {
  useChargeLoading('请稍后.....')
  nextTick(() => {
    let LODOP = getLodop()
     // 打印多少份
    LODOP.PRINT_INIT('病历打印')
    // 打印类型，就是你选择哪个打印机打印，就是上述printList里面的数据
    LODOP.SET_PRINTER_INDEX(printType.value)
    // 这段代码的作用是为了实现没买授权，连续打印多张，不预览的情况下去掉试用版字样
    LODOP.SET_LICENSES("","EE0887D00FCC7D29375A695F728489A6","C94CEE276DB2187AE6B65D56B3FC2848","");
    // LODOP.SET_PRINT_PAGESIZE()第一个参数为1代表纵向打印，2代表横向打印，下列数据为 
    /**
     *  const ruleCase = ref('148mm,210mm')
        const ruleCaseOptions = ref([
           { label: 'A4', value: '210mm,297mm' },
           { label: 'A5', value: '148mm,210mm' },
          ])代表纸张大小
     */
      //内容过多时，可以这样写
     //  if (printStore.direction === '1') {
     // LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'record') // 0 表示根据内容高度自动调整
    //  } else {
     // LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'record')
    }

    if (printStore.direction === '1') {
      LODOP.SET_PRINT_PAGESIZE(
        1,
        printStore.ruleCase.split(',')[0],
        printStore.ruleCase.split(',')[1],
        'record'
      )
    } else {
      LODOP.SET_PRINT_PAGESIZE(
        2,
        printStore.ruleCase.split(',')[0],
        printStore.ruleCase.split(',')[1],
        'record'
      )
    }
   // 第一页
  LODOP.ADD_PRINT_HTM(
    0,
    '5%',
    '90%',
    '100%',
    document.querySelector('.patentMedicine1')!.innerHTML
  )

  LODOP.NewPage()

  // 第二页
  LODOP.ADD_PRINT_HTM(
    0,
    '5%',
    '90%',
    '100%',
    document.querySelector('.patentMedicine2')!.innerHTML
  )

  LODOP.NewPage()

  // 第三页
  LODOP.ADD_PRINT_HTM(
    0,
    '5%',
    '90%',
    '100%',
    document.querySelector('.patentMedicine3')!.innerHTML
  )
   // 这里3表示纵向打印且纸高“按内容的高度”；
    LODOP.SET_PRINT_PAGESIZE(3)
    // 打印多少份
    LODOP.SET_PRINT_COPIES(num.value || 1)
    // 直接打印
    LODOP.PRINT()
    // 可预览
    // LODOP.PREVIEW();
     // 打印成功的回调
    LODOP.On_Return = (taskId: any, value: any) => {
      useChargeLoading('请稍后.....').close()
      emit('update:modelValue', false)
    }
  })
}

如果需要实现，头部底部固定，让后中间内容多的情况下进行分页

 const headHeight1 = Number(document.getElementById('one1')!.offsetHeight * 0.3)
    // 5. 打印头部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      0,
      '6mm',
      '95%',
      `${headHeight1}mm`,
      document.getElementById('one1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示

    // 6. 打印中间内容 (自动分页)
    LODOP.ADD_PRINT_HTM(
      `${headHeight1 + 2}mm`,
      '6mm',
      '95%',
      `${pageHeight - headHeight1 - 44}mm`,
      document.getElementById('two1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 0) // 自动分页

    // 7. 打印底部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      `${pageHeight - 36}mm`,
      '6mm',
      '95%',
      `36mm`,
      document.getElementById('three1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示

上述内容针对打印一张内容分页，打印多张内容，多张内容在分页如何实现呢？

// 切换
const radioChange1 = () => {
  let LODOP = getLodop()
  // 打印多少份
  LODOP.PRINT_INIT('处方打印')
  // 打印类型，就是你选择哪个打印机打印，就是上述printList里面的数据
  LODOP.SET_PRINTER_INDEX(printType.value)
  // 这段代码的作用是为了实现没买授权，连续打印多张，不预览的情况下去掉试用版字样
  LODOP.SET_LICENSES(
    '',
    'EE0887D00FCC7D29375A695F728489A6',
    'C94CEE276DB2187AE6B65D56B3FC2848',
    ''
  )
  if (printStore.direction === '1') {
    LODOP.SET_PRINT_PAGESIZE(
      1,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  } else {
    LODOP.SET_PRINT_PAGESIZE(
      2,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  }
  // 打印多少份
  LODOP.SET_PRINT_COPIES(num.value || 1)
  const pageHeight = +printStore.ruleCase.split(',')[1] as number
  if (radioType.value.includes('1') && caseData.value?.herbalMedPrescForms?.length) {
    const headHeight1 = Number(document.getElementById('one1')!.offsetHeight * 0.3)
    // 5. 打印头部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      0,
      '6mm',
      '95%',
      `${headHeight1}mm`,
      document.getElementById('one1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示

    // 6. 打印中间内容 (自动分页)
    LODOP.ADD_PRINT_HTM(
      `${headHeight1 + 2}mm`,
      '6mm',
      '95%',
      `${pageHeight - headHeight1 - 44}mm`,
      document.getElementById('two1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 0) // 自动分页

    // 7. 打印底部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      `${pageHeight - 36}mm`,
      '6mm',
      '95%',
      `36mm`,
      document.getElementById('three1')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    // 直接打印
    LODOP.PRINT()
    // 可预览
    // LODOP.PREVIEW()
    // 打印成功的回调
    LODOP.On_Return = (taskId: any, value: any) => {
      useChargeLoading('请稍后.....').close()
      emit('update:modelValue', false)
    }
  }
}
const radioChange2 = () => {
  let LODOP = getLodop()
  // 打印多少份
  LODOP.PRINT_INIT('处方打印')
  // 打印类型，就是你选择哪个打印机打印，就是上述printList里面的数据
  LODOP.SET_PRINTER_INDEX(printType.value)
  // 这段代码的作用是为了实现没买授权，连续打印多张，不预览的情况下去掉试用版字样
  LODOP.SET_LICENSES(
    '',
    'EE0887D00FCC7D29375A695F728489A6',
    'C94CEE276DB2187AE6B65D56B3FC2848',
    ''
  )
  if (printStore.direction === '1') {
    LODOP.SET_PRINT_PAGESIZE(
      1,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  } else {
    LODOP.SET_PRINT_PAGESIZE(
      2,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  }
  // 打印多少份
  LODOP.SET_PRINT_COPIES(num.value || 1)
  // 4. 设置纸张高度 (A4: 297mm, A5: 210mm)
  const pageHeight = +printStore.ruleCase.split(',')[1] as number
  if (radioType.value.includes('2') && caseData.value?.chineseDrugPrescForms?.length) {
    const headHeight2 = Number(document.getElementById('one2')!.offsetHeight * 0.3)
    // 5. 打印头部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      0,
      '6mm',
      '95%',
      `${headHeight2}mm`,
      document.getElementById('one2')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示

    // 6. 打印中间内容 (自动分页)
    LODOP.ADD_PRINT_HTM(
      `${headHeight2 + 2}mm`,
      '6mm',
      '95%',
      `${pageHeight - headHeight2 - 44}mm`,
      document.getElementById('two2')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 0) // 自动分页

    // 7. 打印底部 (每页都固定显示)
    LODOP.ADD_PRINT_HTM(
      `${pageHeight - 36}mm`,
      '6mm',
      '95%',
      `36mm`,
      document.getElementById('three2')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    // 直接打印
    LODOP.PRINT()
    // 可预览
    // LODOP.PREVIEW()
    // 打印成功的回调
    LODOP.On_Return = (taskId: any, value: any) => {
      useChargeLoading('请稍后.....').close()
      emit('update:modelValue', false)
    }
  }
}
const radioChange3 = () => {
  let LODOP = getLodop()
  // 打印多少份
  LODOP.PRINT_INIT('处方打印')
  // 打印类型，就是你选择哪个打印机打印，就是上述printList里面的数据
  LODOP.SET_PRINTER_INDEX(printType.value)
  // 这段代码的作用是为了实现没买授权，连续打印多张，不预览的情况下去掉试用版字样
  LODOP.SET_LICENSES(
    '',
    'EE0887D00FCC7D29375A695F728489A6',
    'C94CEE276DB2187AE6B65D56B3FC2848',
    ''
  )
  if (printStore.direction === '1') {
    LODOP.SET_PRINT_PAGESIZE(
      1,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  } else {
    LODOP.SET_PRINT_PAGESIZE(
      2,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  }
  // 打印多少份
  LODOP.SET_PRINT_COPIES(num.value || 1)
  // 4. 设置纸张高度 (A4: 297mm, A5: 210mm)
  const pageHeight = +printStore.ruleCase.split(',')[1] as number
  if (radioType.value.includes('3') && caseData.value?.infusionPrescForms?.length) {
    const headHeight3 = Number(document.getElementById('one3')!.offsetHeight * 0.3)
    LODOP.ADD_PRINT_HTM(
      0,
      '6mm',
      '95%',
      `${headHeight3}mm`,
      document.getElementById('one3')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    LODOP.ADD_PRINT_HTM(
      `${headHeight3 + 2}mm`,
      '6mm',
      '95%',
      `${pageHeight - headHeight3 - 44}mm`,
      document.getElementById('two3')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 0) // 自动分页
    LODOP.ADD_PRINT_HTM(
      `${pageHeight - 36}mm`,
      '6mm',
      '95%',
      `36mm`,
      document.getElementById('three3')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    // 直接打印
    LODOP.PRINT()
    // 可预览
    // LODOP.PREVIEW()
    // 打印成功的回调
    LODOP.On_Return = (taskId: any, value: any) => {
      useChargeLoading('请稍后.....').close()
      emit('update:modelValue', false)
    }
  }
}
const radioChange4 = () => {
  let LODOP = getLodop()
  // 打印多少份
  LODOP.PRINT_INIT('处方打印')
  // 打印类型，就是你选择哪个打印机打印，就是上述printList里面的数据
  LODOP.SET_PRINTER_INDEX(printType.value)
  // 这段代码的作用是为了实现没买授权，连续打印多张，不预览的情况下去掉试用版字样
  LODOP.SET_LICENSES(
    '',
    'EE0887D00FCC7D29375A695F728489A6',
    'C94CEE276DB2187AE6B65D56B3FC2848',
    ''
  )
  if (printStore.direction === '1') {
    LODOP.SET_PRINT_PAGESIZE(
      1,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  } else {
    LODOP.SET_PRINT_PAGESIZE(
      2,
      `${printStore.ruleCase.split(',')[0]}mm`,
      `${printStore.ruleCase.split(',')[1]}mm`,
      'record'
    )
  }
  // 打印多少份
  LODOP.SET_PRINT_COPIES(num.value || 1)
  const pageHeight = +printStore.ruleCase.split(',')[1] as number
  if (radioType.value.includes('4') && caseData.value?.stickingPrescForms?.length) {
    const headHeight4 = Number(document.getElementById('one4')!.offsetHeight * 0.3)
    LODOP.ADD_PRINT_HTM(
      0,
      '6mm',
      '95%',
      `${headHeight4}mm`,
      document.getElementById('one4')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    LODOP.ADD_PRINT_HTM(
      `${headHeight4 + 2}mm`,
      '6mm',
      '95%',
      `${pageHeight - headHeight4 - 44}mm`,
      document.getElementById('two4')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 0) // 自动分页
    LODOP.ADD_PRINT_HTM(
      `${pageHeight - 36}mm`,
      '6mm',
      '95%',
      `36mm`,
      document.getElementById('three4')!.innerHTML
    )
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // 每页显示
    // 直接打印
    LODOP.PRINT()
    // 可预览
    // LODOP.PREVIEW()
    // 打印成功的回调
    LODOP.On_Return = (taskId: any, value: any) => {
      useChargeLoading('请稍后.....').close()
      emit('update:modelValue', false)
    }
  }
}

// 准备打印
const printContent = () => {
  useChargeLoading('请稍后.....')
  nextTick(() => {
    radioChange1()
    radioChange2()
    radioChange3()
    radioChange4()
  })
}

其实无非就是调用多次打印机。

自定义打印样式

自定义打印参数，收集右侧的参数。

image.png 以及如果选择预览模式，就可以看到预览效果，预览效果和最终的打印效果一致。

image.png

最后

本文只是简单介绍C-Lodop打印插件的基本使用，jym如有其他方法或者不同看法，欢迎提出。你们的反馈，是我最大的前进动力。

avatar
文章
阅读
粉丝