官网：Lodop和C-Lodop官网主站
情况：斑马打印机 lodop第三方打印插件 vue3 表格形式包含二维码
1.下载lodop插件 下载后得到LodopFuncs.js 放到工具utils（任意文件夹）文件夹
2.下载斑马打印机驱动（找厂商提供或者官网找到对应型号下载即可）如下文件下载好之后双击 打开安装。
3.准备就绪 代码如下
---引入
<template> <el-table row-key="path" style="width: 100%" :data="tableListWord" border :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle" scrollbar-always-on > <el-table-column prop="shopOrder" label="工单号" min-width="180"></el-table-column> <el-table-column prop="stripBarCode" label="条料条码" min-width="220"></el-table-column> <el-table-column label="操作" fixed="right" min-width="80"> <template #default="scope"> <div> <!-- 测试打印 --> <el-button size="small" text type="primary" @click="handlePrint(scope.row)"> 打印 </el-button> </div> </template> </el-table-column> </el-table> <template #footer> <span style="margin-right: 20px"> <el-button icon="Printer" type="primary" @click="printAll">全部打印</el-button> </span> </template> </template>
import { getLodop } from '/@/utils/LodopFuncs.js';
// 单独打印 const handlePrint = useThrottle( async(row: any) => { const res = await getPrint(row.id); let data = res.data;//data是对象 prints(1,data) }, 3000); // 3000 毫秒内最多执行一次 // 全部打印 const printAll = async () => { ElMessageBox.confirm(`确认打印全部（${crossCuttingList.value.length}张）标签吗?`, '提示', { confirmButtonText: '确认', showCancelButton: false, type: 'warning', }).then(async () => { const res = await goSeartch(printPortData.value); if(res.code==0){ await prints(3,res.data.items); //入参是数组 } }); }; // 打印格式 function PRINT_TABLE(data: any) { let LODOP = getLodop(); if (!LODOP) { console.log('LODOP 插件未安装或未启动'); return; } // 设置打印内容，这里使用静态 HTML 表格作为示例 const printHtml = ` <html> <head> <title></title> <style> *{padding:0;margin:0;} body,html{padding:0;margin:auto 0;box-sizing: border-box;display: table;padding-top:20px;} table tr th{padding:6px; border:1px solid #000;font-size:14px;text-align: left;box-sizing: border-box;white-space: nowrap;} table {border-collapse: collapse;position: absolute;top: 2px;right: 0;bottom: 0;left: 10px;} #fonts{font-size:14px;} img{width:60px;height:60px;} </style> </head> <body> <table id='fonts'> <tr> <th>工单物料号</th> <th colspan="3">${data.item}</th> <th colspan="5"> 有钱集团 </th> </tr> <tr> <th>条料条码</th> <th colspan="4">${data.stripBarCode}</th> </tr> <tr> <th>卷料条码</th> <th colspan="3">${data.materialBarCode}</th> <th rowspan="6" colspan="2"> </th> </tr> <tr> <th>品牌</th> <th colspan="3">${data.brand}</th> </tr> <tr> <th>条料重量</th> <th colspan="3">${data.stripWeight}</th> </tr> <tr> <th>工单</th> <th class='num' colspan="3">${data.shopOrder}</th> </tr> <tr> <th>条料宽度</th> <th colspan="1">${data.stripWidth}</th> <th>单位铁损</th> <th colspan="1">${data.unitIronLoss}</th> </tr> <tr> <th>厂家</th> <th colspan="3">${data.factoryName}</th> </tr> </table> </body></html> `; // 设置打印任务 LODOP.NEWPAGE(); // 新建一个打印页面 // LODOP.SET_PRINT_STYLE('FontSize', 12); // 设置字体大小 // LODOP.SET_PRINT_STYLE('Bold', 1); // 设置为粗体 LODOP.ADD_PRINT_TABLE(20, 20, '60mm', '60mm', printHtml); LODOP.ADD_PRINT_BARCODE(110, 278, 107,107, 'QRCode', data.stripBarCode);//添加条形码 参数12是坐标位置 34是二维码大小 } // 打印确认1.单独打印 3.全部打印 async function prints(num: number, datas?: any) { const LODOP = getLodop(); // 调用LODOP控件 if (LODOP) { if (num == 1) { PRINT_TABLE(datas); } else { console.log(datas,'DATAS'); datas.forEach((item: any) => { console.log(item,'3333'); PRINT_TABLE(item); }); } LODOP.SET_PREVIEW_WINDOW(200, 100, 200, 800, 600, '确认打印'); //打印前弹出选择打印机的对话框 LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1); //打印后自动关闭预览窗口 LODOP.PREVIEW(); // 预览 // 直接打印 // LODOP.PRINT() } else { alert('请确保LODOP打印控件已正确安装！'); } }
4.打印全部效果预览 单独打印效果一样 标签大小和适配自己调整为标签纸大小适应即可
