最近项目有个需求,用户下单,商家端自动打印小票,在网上找了很多办法,基本都不能跳过预览,最后经过不断尝试,最终选择了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.0mm
  lodop.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:该控件预览打印没有问题,但是跳过预览会出现"试用版"水印,如需去除水印,请购买正式版控件