vue如何使用lodop

最新推荐文章于 2024-08-05 17:29:17 发布
最新推荐文章于 2024-08-05 17:29:17 发布
阅读量6.2k 收藏 19
点赞数 4
分类专栏： element UI Vue lodop 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43575827/article/details/115956645
版权
Vue 同时被 3 个专栏收录
24 篇文章 0 订阅
订阅专栏
element UI
8 篇文章 0 订阅
订阅专栏
lodop
3 篇文章 0 订阅
订阅专栏
本文档介绍了如何在Vue项目中集成并使用LODOP进行打印，包括下载安装LODOP客户端，创建doprint.js和lodop.js文件，设置打印配置，并展示了一个包含背景图的打印样例，详细解释了代码实现过程。
摘要由CSDN通过智能技术生成

如何在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>

在这里插入图片描述

Faith_ZL
关注
专栏目录
Vue 项目中使用Lodop进行打印
weixin_33671935的博客
09-26 2541
配置文件与地址 Lodop 插件下载、打印设计都在这个网址上面进行，过程不做过多赘述，相信大家在看文章前应该对Lodop有了一定的了解 Vue中引入Lodop所需的配置文件 建议在项目中建一个自己的工具方法文件夹，使用方便 相信大家在截图中已经看到了，有个lodop.js的文件，没错！核心的一大坨都在里面，这里直接上代码 var Cre...
vue使用lodop.js实现前端标签打印
weixin_43998944的博客
07-12 3196
vue 使用lodop 实现标签打印
Vue中使用LODOP（打印）
qq_58671311的博客
08-11 1223
三.下载完成后解压得到LodopFuncs.js ，将这个文件复制到Vue项目中的utils文件夹中即可。二.在下载中心点击画红圈的部分（根据自己需求）一.打开LODOP官网。
详解如何在vue项目中使用lodop打印插件
10-17
主要介绍了详解如何在vue项目中使用lodop打印插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
lodop打印控件
最新发布
wangjun772798279的博客
08-05 1816
几何图table”结构，这种结构仅适合几何图，该Table的第一列是每个几何图的名称，可任意起名，第二列是“左下角位置X值”，第三列是“左下角位置Y值”，第四列是“几何图的宽”，第五列是“几何图的高”，第六列是“几何图的图形代码”，第七列是“几何图的颜色”，第八列是“几何图是否透明”，1代表透明，0代表不透明。：所选纸张类型名，字符型。字符型时可包含单位名：in(英寸)、cm(厘米)、mm(毫米)、pt(磅)、px(1/96英寸)、%(百分比)，如“10mm”表示10毫米，宽和高相等时是圆。
LODOP 打印 控件 Vue 的使用方法
qq_38785028的博客
03-04 725
1.将LodopFuncs.js 引入vue 中 将 LodopFuncs.js 的最后一行 将getLodop 方法暴露出去。2.在组件中直接使用。
vue中使用打印lodop？
qq_62861688的博客
06-09 608
执行安装
vue + Lodop打印控件的使用
飞猪
09-27 2237
当你的程序采用预览打印语句(如PREVIEW、PREVIEWA等)且预览窗口正常大小时，是完全免费的，输出结果没有水印。仅当采用直接打印语句(如PRINT、PRINTA等)或预览窗口过小时，打印结果的左下角会出现如下两种样式的水印。还有一种方法是不花钱去注册，也就是打印预览的方式去打印，一个物料码一个物料码的打印（同一个物料码可以打印多张）2.安装打印驱动（我的是得力打印机，根据打印机机型，去得力官网下载对应的打印驱动并安装）LodopFuncs.js放在项目中，打印的页面中注册引入进去。
Vue使用lodop实现打印小结
10-16
在Vue项目中使用Lodop或C-Lodop时，需要先将官方提供的LodopFuncs.js文件保存到项目目录下，例如myProject/src/assets/。接下来，需要修改LodopFuncs.js文件，在文件底部添加export {getLodop};代码，以导出getLodop...
【JavaScript源代码】vue使用lodop打印控件实现浏览器兼容打印的方法.docx
12-29
在标题和描述中提到的 Vue 使用 LODOP 实现打印的方法如下： 1. 首先，你需要在项目中引入 `LodopFuncs.js` 文件，这是一个包含 LODOP 对象和相关方法的 JavaScript 文件。你可以通过以下方式全局或局部导入： ```...
Vue中使用Lodop插件实现打印功能的简单方法
10-15
主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
lodop web打印 vue项目 无预览直接打印
Sensation_cyq的博客
07-11 3408
封装 LodopFuncs.js var CreatedOKLodop7766=null; //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent; if (ua.match(/Windows\sPhone/i) !=nu...
vue + Lodop 制作可视化设计页面 实现打印设计功能（二）
Qiyandays的博客
06-27 851
vue3 + Lodop 制作可视化设计页面 实现打印设计功能
vue使用Lodop详细步骤
weixin_43631677的博客
11-21 679
vue 使用打印机打印二维码标签贴纸
vue 调用打印机插件 LODOP 实例详解
银鞍照白马的博客
12-12 3292
最近的项目需要调用打印机，把网上的一些资料整理一些，分享给大家，需要注意的是lodop会有脚标，如果想去掉脚标，只能先预览再打印，或者购买版权。 lodop官网vue案例地址：点击进入 安装打印机驱动，设置打印尺寸这里就先不分享了。直接上代码 1、下载LodopFuncs.js文件，把js放在常用的js文件夹中 2 、修改LodopFuncs.js文件 //在文件最底部添加一行代码，把该文件中的...
如何在vue项目中使用lodop打印插件
我的博客
12-18 7108
https://www.jianshu.com/p/d288963c1a80 先写了个webdemo &lt;%-- Created by IntelliJ IDEA. User: Administrator Date: 2018/12/17 Time: 13:49 To change this template use File | Settings | Fil...
Vue3+hooks快速接入Lodop打印插件
Bruce__taotao的博客
12-15 2283
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。
vue使用 lodop 打印小票
01-20
Vue.js 是一个流行的前端框架，而 LOdop 是一个强大的打印插件，用于在浏览器中打印各种类型的文档和小票。 在 Vue 中使用 LODOP 打印小票可以通过以下步骤实现： 首先，需要在项目中引入 LODOP 打印插件的相关文件，可以通过 npm 安装 LODOP 打印插件，并在 Vue 项目的入口文件中引入 LODOP 打印插件。 然后，创建一个打印小票的组件，在组件中通过 LODOP 的 API 方法来设置小票的内容和样式。 接下来，可以在需要打印小票的地方调用 LODOP 的打印方法，将准备好的小票内容传入，即可实现通过 LODOP 在浏览器中打印小票。 此外，还可以通过 LODOP 提供的模板功能来设计小票的模板，使得小票的样式更加灵活和个性化。 总的来说，Vue 中使用 LODOP 打印小票是一个相对简单而且效果非常不错的方案，可以帮助开发者实现在浏览器中快速、方便地打印各种类型的小票和文档。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值