最近项目有个需求,用户下单,商家端自动打印小票,在网上找了很多办法,基本都不能跳过预览,最后经过不断尝试,最终选择了lodop实现,下面为保姆式教学.
先贴官网Lodop和C-Lodop官网主站
第一步 下载控件
第二步 安装控件
到这一步离成功又近一步了
第三步 将LodopFuncs.js引入自己的项目中
第四步 在需要的页面引入LodopFuncs.js
import { getLodop } from "@/utils/LodopFuncs.js";
初始化lodop
//定义一个变量var lodop;//程序加载有个加载过程，进页面立即初始化的话，会提示未加载完成function Init() {//初始化变量 str1 str2默认不填 ，是注册正版时的验证账号密码lodop = getLodop(str1,str2);}//执行lodop_print()即可直接打印function lodop_print(html) {//需要打印的内容lodop.PRINT_INIT();//设置打印页面大小，这里3表示纵向打印且纸高“按内容的高度”；48表示纸宽48mm；20表示页底空白2.0mmlodop.SET_PRINT_PAGESIZE(3, 580, 100, "11");//设置打印页面内容 10为上边距 0为左边距 100%为宽度 ""为高度，发现不填也没事，html是打印内容lodop.ADD_PRINT_HTM(0, 0, "100%", "100", html);//打印操作lodop.PRINT();}
调用(由于我的项目中可能有多个订单,所以我用了创建节点的方法,我们项目比较简单,采用的是长轮询获取订单,如果不是,请按需修改代码)
res.data.data.forEach((item) => {let html = document.createElement("div");html.id = "testbox";html.innerHTML = `<div style="font-size:24px;font-width:bolder;text-align: center;">#${item.pickup_code}</div><div style="font-size:18px;font-width:bolder;text-align: center;">${item.shop.name}</div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">商品名称:</div><div style="font-size:11px">${item.order_goods.good_name}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">商品数量:</div><div style="font-size:11px">${item.order_goods.good_quantity}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">订单号:</div><div style="font-size:11px">${item.order_no}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">下单时间:</div><div style="font-size:11px">${item.created_at}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">取货时间:</div><div style="font-size:11px">${item.pickup_date} ${item.pickup_time_start}~${item.pickup_time_end}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">门市价格:</div><div style="font-size:11px">¥${item.order_goods.price_type == 1? item.order_goods.original_price: item.order_goods.original_price_range_start +"-" +item.order_goods.original_price_range_end}</div></div><div style="display:flex;justify-content: space-between;font-size:12px; line-height:20px "><div style="width:60px">订单金额:</div><div style="font-size:11px">¥${item.order_amount}</div></div><p style="color:#eee">---------------------------------</p>`;let htmlData = html.innerHTML;lodop_print(htmlData);});
PS:该控件预览打印没有问题,但是跳过预览会出现"试用版"水印,如需去除水印,请购买正式版控件
