用c-lodop打印远端pdf

本来c-lodop是可以打印pdf的，但是后端返回一个pdf链接，所以前端需要将pdf先加载出来，然后再去打印他，不然打印出来的就是空白。

c-lodop的准备工作

这段我也是网上找的，直接拿过来就能用，很酷！

import { message } from 'ant-design-vue'
// ==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==
const install_lodop32 = 'install_lodop32.exe'
const install_lodop64 = 'install_lodop64.exe'
const CLodop_Setup_for_Win32NT = 'CLodop_Setup_for_Win32NT.exe'
// eslint-disable-next-line no-unused-vars
let CreatedOKLodopObject, CLodopIsLocal, CLodopJsState

// ==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
  try {
    const 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

    const verTrident = ua.match(/Trident\D?\d+/i)
    const verIE = ua.match(/MSIE\D?\d+/i)
    let verOPR = ua.match(/OPR\D?\d+/i)
    let verFF = ua.match(/Firefox\D?\d+/i)
    const 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) {
      let 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(以防其中一个被占):==
function loadCLodop() {
  if (CLodopJsState === 'loading' || CLodopJsState === 'complete') return
  CLodopJsState = 'loading'
  const head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
  const JS1 = document.createElement('script')
  const 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() {
    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对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
  const strHtmInstall = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='${install_lodop32}' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
  const strHtm64_Install = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='${install_lodop64}' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
  const strHtmFireFox = `<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>`
  const strHtmChrome = `<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>`
  const strCLodopUpdate = `<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='${CLodop_Setup_for_Win32NT}' target='_self'>执行升级</a>,升级后请刷新页面。</font>`
  let LODOP
  try {
    const ua = navigator.userAgent
    const isIE = !!ua.match(/MSIE/i) || !!ua.match(/Trident/i)
    if (needCLodop()) {
      try {
        LODOP = window.getCLodop()
      } catch (err) {
        console.log()
      }
      if (!LODOP && CLodopJsState !== 'complete') {
        if (CLodopJsState === 'loading') message.info('网页还没下载完毕，请稍等一下再操作.')
        else message.info('没有加载CLodop的主js，请先调用loadCLodop过程.')
        return
      }
      if (!LODOP) {
        // document.body.innerHTML =
        //   strCLodopInstall_1 +
        //   (CLodopIsLocal ? strCLodopInstall_2 : '') +
        //   strCLodopInstall_3 +
        //   document.body.innerHTML;
        // message.error('打印控件未安装,请于下载专区安装');
        return
      } else {
        if (window.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 {
      const 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()) return
      // document.body.innerHTML =
      //   (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
      // message.error('打印服务需升级，请于下载专区升级')
    }
    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==

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

export { getLodop }

打印pdf

import { getLodop } from './lodopFuncs'
let lodop = null

const initLodop = () => {
  if (!getLodop()) {
    Message.error('打印控件未安装，请于下载专区安装')
    return
  }
  lodop = getLodop()
  if (lodop.VERSION < '6.2.2.6') {
    Message.error('打印服务需升级，请于下载专区升级')
    return
  }
  lodop.PRINT_INIT('qsyy') // 打印初始化 PRINT_INIT(打印任务名)
  lodop.SET_LICENSES('', '4AA5CA8E56EDABDCD8F007D7B4FB9152922', '', '') // 设置软件产品注册信息
  return lodop
}

/**
 * 加载pdf 并转为base64
 * @param {string} pdfUrl[pdf的链接]
 */
const getFileBase64 = async pdfUrl => {
  let fileData = null
  try {
    fileData = await axios({
      method: 'get',
      url: pdfUrl, // 请求地址
      responseType: 'blob' // 指明服务器返回的数据类型
    })
  } catch {
    fileData = null
  }
  return new Promise((resolve, reject) => {
    if (fileData && fileData.data) {
      const file = new Blob([fileData.data], { type: 'application/pdf' })
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    } else {
      reject('文件读取错误')
    }
  })
}

/**
 * 打印pdf
 * @param {string} pdfUrl[pdf的链接]
 */
const lodopFdfBase64 = (pdfUrl) => {
  const lodop = initLodop()
  if (!lodop) return
  getFileBase64(pdfUrl).then(res => {
    lodop.SET_PRINT_PAGESIZE(2, 0, 0, 'A5') // 设置纸张大小
    lodop.ADD_PRINT_PDF(0, 0, '100%', '100%', res?.split('data:application/pdf;base64,')[1])
    const printName = sessionStorage.getItem('printName') // 获取默认打印机
    if (lodop.SET_PRINTER_INDEX(printName)) {
      lodop.PRINTA() // 静默打印
    } else {
      lodop.PREVIEW() // 预览
    }
  })
}

export { lodopFdfBase64 }