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

最新推荐文章于 2024-10-24 14:22:09 发布

原创最新推荐文章于 2024-10-24 14:22:09 发布 · 2.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #云打印

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

条形码

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Lodop插件进行条形码打印。首先，将LodopFuncs.js文件导入项目，并导出getLodop函数。然后，在打印事件处理函数中调用getLodop获取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厂家')
    }
}