vue如何使用lodop

如何在Vue中使用lodop最近在项目中需要打印，lodop是web端常用的打印工具，安装打印机驱动之后，连接打印机，看是否能实现正常打印。打开lodop官网，http://www.lodop.net/index.html 下载lodop客户端。把lodopFuncs拷贝到utils文件夹下，import { getLodop } from '@t/lodop' //这块就是引用的上面一大坨暴露出

Faith_ZL

6257人浏览 · 2021-04-21 15:42:59

Faith_ZL · 2021-04-21 15:42:59 发布

如何在Vue中使用lodop

最近在项目中需要打印，lodop是web端常用的打印工具，安装打印机驱动之后，连接打印机，看是否能实现正常打印。
打开lodop官网，http://www.lodop.net/index.html 下载lodop客户端。
lodopFuncs.js 就是我们所需要的文件
把lodopFuncs拷贝到utils文件夹下，新建doprint.js和lodop.js

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

const PrintAccount = (qrTitle, codetype, url, code) => {
    let qrAccount = `${url}/#/?type=${codetype}&code=${code}`
    // 调用打印对象
    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 }

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

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==
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的主JS,用双端口8000和18000(以防其中一个被占):==
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");
    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(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 default 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.2.3") {
                    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);
    }
}

修改文件，只保留我们需要的主函数
在需要打印的文件中引入我所用到的是包含背景图的打印，如果你跟我的需求不同，请参照在在线样例样例清单查找你需要的样例：在这里插入图片描述
或者直接进入设计模式设计你所需要的文件样式
http://demo.sinoverse.cn/lodop_print

下面是我打印的代码：

<template>
  <div class="printSample">
    <h2>
      <b><font color="#009999">演示用程序方式加载背景图：</font></b>
    </h2>
    <p>
      下面是互联网上的一个图片，进入以它为背景图的<a
        href="javascript:myPrintSetup2()"
        @click="myPrintSetup2"
        >打印维护</a
      >看看。
    </p>
    <p>
      <img
        border="0"
        src="../assets/微信图片_20210421102927.jpg"
        width="336"
        height="242"
      />&nbsp;
    </p>
    <p>
      默认情况下背景图是不打印的，可以用BKIMG_PRINT让<a
        href="javascript:myPreview1()"
        @click="myPreview1()"
        >打印或预览</a
      >包含背景图。
    </p>
  </div>
</template>
<script languagen="script">
import getLodop from "../utils/lodop";
export default {
  data() {
    return {
      LODOP:null
    };
  },
  methods: {
    myPrintSetup2() {
    
      this.CreatePage();
      this.LODOP.PRINT_SETUP();
    },
    myPreview1() {
      this.CreatePage();
      this.LODOP.SET_SHOW_MODE("BKIMG_PRINT", 1);
      this.LODOP.PREVIEW();
    },
    CreatePage() {
      //设计网址 http://demo.sinoverse.cn/lodop_print
      this.LODOP = getLodop();

      this.LODOP.PRINT_INIT("");
      this.LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", true);

      this.LODOP.PRINT_INITA(-42, 0, 800, 600, "");
      this.LODOP.ADD_PRINT_TEXT(139, 403, 189, 20, "收款人");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(171, 107, 193, 20, "账号");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(168, 403, 192, 20, "新加文本4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(198, 105, 191, 42, "开户行1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(195, 403, 191, 41, "开户行2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(64, 505, 231, 20, "机打票号：11111111");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(116, 279, 50, 20, "nian");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(115, 335, 26, 20, "yu");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(116, 370, 27, 20, "ri");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(59, 59, 101, 20, "电子缴款码：");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(59, 138, 176, 20, "1414141414");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(80, 59, 101, 20, "集中汇缴：");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(100, 60, 177, 20, "校验码：454545");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(119, 108, 130, 20, "执收单位");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(248, 59, 48, 20, "1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(246, 108, 225, 20, "项目名成1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(245, 391, 43, 20, "数量1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(244, 457, 65, 20, "标准1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(244, 548, 96, 20, "金额1");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(277, 59, 47, 20, "2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(304, 59, 47, 20, "3");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(331, 59, 48, 20, "4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(360, 60, 47, 20, "5");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(275, 106, 231, 20, "项目名称2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(304, 107, 230, 20, "项目名称3");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(332, 108, 225, 20, "项目名称4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(359, 106, 230, 20, "项目名称5");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(274, 391, 48, 20, "数量2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(306, 391, 54, 20, "数量3");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(331, 392, 46, 20, "数量4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(356, 391, 49, 20, "数量5");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(273, 457, 65, 20, "标准2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(304, 457, 65, 20, "标准3");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(327, 458, 65, 20, "标准4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(356, 456, 65, 20, "标准5");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(270, 547, 100, 20, "金额2");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(300, 548, 100, 20, "金额3");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(329, 546, 100, 20, "金额4");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(356, 547, 100, 20, "金额5");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(386, 186, 268, 20, "壹佰万元整");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(383, 546, 100, 20, "1000000");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(453, 224, 90, 20, "经办人");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(453, 85, 100, 20, "复核人");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(480, 77, 604, 20, "备注");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
      this.LODOP.ADD_PRINT_TEXT(144, 108, 185, 20, "猪狗蛋蛋");
      this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
      this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    },
  },
};
</script>
<style scoped>
</style>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^