win用Lodop实现套打(目前国产电脑还没有使用成功)

202 阅读3分钟

checkPrint.vue

<template>
    <div>
        <a-card title="支票内容明细" :headStyle="tStyle" style="height:700px;">
          <p style="color: red;">如若打印控件未安装!点击这里 <vxe-button status="danger" @click="clickEvent10">下载打印驱动</vxe-button>执行安装,安装后请刷新页面或重新进入。</p>
        <vxe-form :data="form" @submit="findList" :rules="rules">
          <vxe-form-item title="收款人" field="payee" :item-render="{}" span="13">
            <template #default="{ data }">
              <vxe-input v-model="data.payee" placeholder="请输入收款人名称" ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="金额" field="amount" :item-render="{}"  span="13">
            <template #default="{ data }">
              <vxe-input v-model="data.amount" placeholder="请输入金额"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="用途" field="purpose" :item-render="{}"  span="13">
            <template #default="{ data }">
              <vxe-input v-model="data.purpose" placeholder="请输入用途"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="出票日期" field="draftData" :item-render="{}"  span="13">
            <template #default="{ data }">
                <vxe-input v-model="data.draftData" type="date" placeholder="请输入出票日期" clearable ></vxe-input>
              </template>
          </vxe-form-item>
          <vxe-form-item  span="13">
            <template #default>
              <vxe-button type="submit" status="primary">确定并浏览打印内容</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
             
            </template>
          </vxe-form-item>
        </vxe-form>
      </a-card>
    </div>
  </template>
   
  <script>
  import { getLodop } from '@/utils/lodop/lodop.js'
  import imgsrc from '@/assets/支票底版.jpg'
  import VXETable from 'vxe-table'
  export default {
    data() {
      return {
        imgsrc,
        tStyle:{"font-weight": "bold"},
            data: {
              payee: '', // 收款人
              amount: '',// 金额
              bigAmount:'',//人民币大写
              purpose:'',// 用途
              draftData:'',// 出票日期大写
              money:'',// 左下角的金额
              date:[],// 出票日期
              str2:[], // 框框里的金额数组
              },
               form: {
               payee: '', // 收款人
               amount: '',// 金额
               purpose:'',// 用途
               draftData:'',// 出票日期
               },
              rules: {
                payee: [
                  { required: true, message: '请输入收款人' },
                ],
                amount: [
                  { required: true, message: '请输入金额' }
                ],
                purpose: [
                  { required: true, message: '请输入用途' }
                ],
                draftData: [
                  { required: true, message: '请输入出票日期' }
                ]
        }
      }
    },
    created() {
    
    },
    methods: {
      clickEvent10 () {
        window.open(encodeURI(window._CONFIG['domianURL'] + '/sys/common/download/' + 'files/20230406/lodop_1680752809992.zip'));
            },
      printPdf(data) {
        let LODOP = getLodop()
        if (LODOP===undefined) {
          VXETable.modal.alert({ content: '还未安装打印驱动,请下载打印驱动', status: 'warning' })
          return
        }
        LODOP.PRINT_INITA(0,0,908,336,"");
        LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
        LODOP.ADD_PRINT_SETUP_BKIMG(`"<img border='0' src=${this.imgsrc}>"`);//背景图
        LODOP.SET_SHOW_MODE("BKIMG_LEFT",0);
        LODOP.SET_SHOW_MODE("BKIMG_TOP",0);
        LODOP.SET_SHOW_MODE("BKIMG_WIDTH","236.27mm");//设置纸张长度
        LODOP.SET_SHOW_MODE("BKIMG_HEIGHT","79.9mm");//设置纸张高度
        LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",true); // 预览的时候带背景
        LODOP.ADD_PRINT_TEXT(114,645,13,20,data.str2[10]);//亿
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,659,13,20,data.str2[9]);//千万
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,675,13,20,data.str2[8]);// 百万
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,691,13,20,data.str2[7]);// 十万
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,705,13,20,data.str2[6]);// 万
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,720,13,20,data.str2[5]);// 千
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,736,13,20,data.str2[4]);// 百
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,752,13,20,data.str2[3]);// 十
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);

        LODOP.ADD_PRINT_TEXT(114,767,13,20,data.str2[2]);// 元
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,782,13,20,data.str2[1]);// 角
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);
        LODOP.ADD_PRINT_TEXT(114,797,13,20,data.str2[0]);// 分
        LODOP.SET_PRINT_STYLEA(0,"Bold",1);

        LODOP.ADD_PRINT_TEXT(166,72,33,16,data.date[0]); //日期年
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(166,112,22,14,data.date[1]);// 日期月
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(165,138,27,13,data.date[2]);// 日期日
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(191,65,115,20,data.payee);// 付款人
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(228,75,114,16,data.money);// 左下角金额
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(246,70,120,24,data.purpose);// 用途
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(60,356,55,17,data.draftData.year);// 日期大写年
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(59,435,36,17,data.draftData.month);// 日期大写月
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(58,491,46,20,data.draftData.day);// 日期大写日
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(107,302,338,25,data.bigAmount);// 金额大写
        LODOP.SET_PRINT_STYLEA(0,"FontSize",11);
        LODOP.ADD_PRINT_TEXT(144,295,256,20,data.purpose);//用途
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        // LODOP.SET_PRINT_STYLEA(0,"LetterSpacing",9);
        LODOP.ADD_PRINT_TEXT(206,21,145,20,"");
        LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
        LODOP.ADD_PRINT_TEXT(79,302,279,20,data.payee);// 左下角付款人
        LODOP.SET_PRINT_PAGESIZE(2)
        //LODOP.PREVIEW()// 打印预览
        LODOP.PRINT_SETUP() // 手动维护
       
      },
      // 金额数字转大写
      digitUppercase(price) {
      const fraction = ['角', '分']
      const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
      const unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
      ]
      let num = Math.abs(price)
      let s = ''
      fraction.forEach((item, index) => {
        s += (digit[Math.floor(num * 10 * (10 ** index)) % 10] + item).replace(/零./, '')
      })
      s = s || '整'
      num = Math.floor(num)
      for (let i = 0; i < unit[0].length && num > 0; i += 1) {
        let p = ''
        for (let j = 0; j < unit[1].length && num > 0; j += 1) {
          p = digit[num % 10] + unit[1][j] + p
          num = Math.floor(num / 10)
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
      }
 
      return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
    },
    // 点击确定触发的事件
    findList(){
      this.data={
        payee:this.form.payee,
        amount:+this.form.amount,
        purpose:this.form.purpose,
        draftData:this.convertChineseDate(this.form.draftData),
        payingBank:this.form.payingBank,
        issuerAccount:this.form.issuerAccount,
        lineNum:this.form.lineNum,
      }
      this.data.amount=this.data.amount.toFixed(2)
      this.data.money='¥'+this.numFormat(this.data.amount)
      this.str(this.data.amount)
      this.data.date=this.form.draftData.split('-')
      this.data.bigAmount=this.digitUppercase(this.data.amount)
      this.printPdf(this.data) //启动打印
    },
 
// 支票日期时间转换为中文大写
convertChineseDate(dateStr) {
        let date = new Date(dateStr);
        let chinese = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        let y = date.getFullYear().toString();
        let m = (date.getMonth() + 1).toString();
        let d = date.getDate().toString();
        let result = {
          year:'',
          month:'',
          day:''
        };
        //年
        for (let i = 0; i < y.length; i++) {
            result.year += chinese[y.charAt(i)];
        }
        // result += '年';
        //月
        if (m.length == 2) {
            let temp = '拾';
            if (m.charAt(1) != '0') {
                temp += chinese[m.charAt(1)];
            }
            result.month += temp;
        } else {
          let i='零'
              i+=chinese[m]
            result.month +=i;
        }
        // result += '月';
        //日
        if (d.length == 2) {
            let temp = '';
            if (d.charAt(0) != '1') {
                temp += chinese[d.charAt(0)];
            }
            temp += '拾';
            if (d.charAt(1) != '0') {
                temp += chinese[d.charAt(1)];
            }
            result.day += temp;
        } else {
          let i='零'
          i+=chinese[d]
            result.day += i;
        }
        // result += '日';
        return result;
    },
// 分割字符串
str(str1){
  if (str1.length<12) {
    str1='¥'+str1
  }
  str1=str1.replace('.','')
   this.data.str2=str1.split('')
  this.data.str2=this.data.str2.reverse()
   },
   // 将带小数的数字转为千分位
   numFormat(num){
    num=num.toString().split(".");  // 分隔小数点
    var arr=num[0].split("").reverse();  // 转换成字符数组并且倒序排列
    var res=[];
    for(var i=0,len=arr.length;i<len;i++){
      if(i%3===0&&i!==0){
         res.push(",");   // 添加分隔符
      }
      res.push(arr[i]);
    }
    res.reverse(); // 再次倒序成为正确的顺序
    if(num[1]){  // 如果有小数的话添加小数部分
      res=res.join("").concat("."+num[1]);
    }else{
      res=res.join("");
    }
    return res;
}
    }
  }
  </script>
   
  <style lang="scss" scoped></style>

lodop.js

var CreatedOKLodop7766 = null

//====判断是否需要安装CLodop云打印服务器:====
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] >= 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
  }
}

//====页面引用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.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) {}
      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:absoluteleft:0pxtop:-100pxwidth:0pxheight: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)
  }
}