vue中使用Lodop调用打印机打印条形码

最近项目遇到vue实现条形码打印功能,经过自己的一番摸索,找到了一款比较友好的打印插件,本次打印使用的Lodop插件进行功能的实现。(官网链接)
在这里插入图片描述

1、把官方提供的LodopFuncs.js文件保存到某个目录下,

如utils\LodopFuncs.js。

2、修改LodopFuncs.js文件, 在文件最底部添加一行代码

export { getLodop }; //导出getLodop
把该文件中的getLodop函数 export 出来。
在这里插入图片描述

3、在打印事件处理函数所在文件里 import 该 module
import { getLodop } from "@/utils/LodopFuncs";

通过官网提供的Lodop自带的API进行自己需要的条形码样式的构建。

methods: {
	//打印快递单
    btnClickPrint() {
      const vm = this;
      vm.CreatePrintPage(res.data.data);
      LODOP.PREVIEW();
    },
    CreatePrintPage(data) {
      	LODOP = getLodop();
        // LODOP.PRINT_INIT("条形码");
        LODOP.SET_PRINT_PAGESIZE(3, '80mm', 0, "")
        LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 'Full-Width'); 
        // LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true);
        LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW", true);
        // LODOP.SET_PRINT_STYLE("FontName",'微软雅黑'); 
        //纯文本字体间距
        // LODOP.SET_PRINT_STYLE("LetterSpacing", 35);
        // //字号
        LODOP.SET_PRINT_STYLE("FontSize", 8);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        // LODOP.SET_PRINT_STYLE("PenWidth", 5);

        LODOP.ADD_PRINT_TEXT(18, '2mm', '50mm', 0, "xxxxxx服务中心")

        LODOP.ADD_PRINT_TEXT(18, '48mm', '50mm', 0, "打印日期:" + this.getCurrentTime())
        // LODOP.SET_PRINT_STYLEA(0, "Alignment", 1);
        // LODOP.SET_PRINT_STYLEA(0, "HOrient", 1);

        LODOP.ADD_PRINT_BARCODE(40, '2mm', '79mm', 85, "128Auto", '124679846116156646');
        LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);
        // LODOP.SET_PRINT_STYLEA(0, "FontSize", 14);
        // LODOP.SET_PRINT_STYLEA(0,"HOrient",3);

        LODOP.ADD_PRINT_TEXT(135, '2mm', '80mm', 15, "所属单位: " + 'xxxxxx单位')

        LODOP.ADD_PRINT_TEXT(150, '2mm', '80mm', 15, "设备名称: " + 'xxxxxxx设备')
        // LODOP.SET_PRINT_STYLEA(0, "HOrient", 1);
        // LODOP.SET_PRINT_STYLEA(0, "HOrient", 1);
        // 黑龙江省电工仪器仪表工程技术研究中心有限公司
        LODOP.ADD_PRINT_TEXT(165, '2mm', '80mm', 10, "生产厂家: " + 'xxxxxxxxxxx厂家')
    }
}

在打印事件函数中调用getLodop获取LODOP对象变量,
按照官方教程书写自己的打印函数,通过 PRINT、PREVIEW、PRINT_DESIGN进行输出。
在这里插入图片描述

最后通过提供的打印机,安装打印机驱动,实现简单打印效果,可以根据自己的需要进行微调,效果如图:

在这里插入图片描述

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值