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

最近项目遇到vue实现条形码打印功能,经过自己的一番摸索,找到了一款比较友好的打印插件,本次打印使用的Lodop插件进行功能的实现。(官网链接)
vue中使用Lodop调用打印机打印条形码_第1张图片

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

如utils\LodopFuncs.js。

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

export { getLodop }; //导出getLodop
把该文件中的getLodop函数 export 出来。
vue中使用Lodop调用打印机打印条形码_第2张图片

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进行输出。
vue中使用Lodop调用打印机打印条形码_第3张图片

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

vue中使用Lodop调用打印机打印条形码_第4张图片

你可能感兴趣的:(vue,条形码,vue,javascript,云打印)