最近项目遇到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进行输出。