第一步：引入相关的js 导出 getLodop 这个函数
// lodopUtils.js
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;//判断是否需要CLodop(那些不支持插件的浏览器)
function needCLodop() {try {var ua = navigator.userAgent;if (ua.match(/Windows\sPhone/i))return true;if (ua.match(/iPhone|iPod|iPad/i))return true;if (ua.match(/Android/i))return true;if (ua.match(/Edge\D?\d+/i))return true;var verTrident = ua.match(/Trident\D?\d+/i);var verIE = ua.match(/MSIE\D?\d+/i);var verOPR = ua.match(/OPR\D?\d+/i);var verFF = ua.match(/Firefox\D?\d+/i);var x64 = ua.match(/x64/i);if ((!verTrident) && (!verIE) && (x64))return true;else if (verFF) {verFF = verFF[0].match(/\d+/);if ((verFF[0] >= 41) || (x64))return true;} else if (verOPR) {verOPR = verOPR[0].match(/\d+/);if (verOPR[0] >= 32)return true;} else if ((!verTrident) && (!verIE)) {var verChrome = ua.match(/Chrome\D?\d+/i);if (verChrome) {verChrome = verChrome[0].match(/\d+/);if (verChrome[0] >= 41)return true;}}return false;} catch (err) {return true;}
}//加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占)
function loadCLodop() {if (CLodopJsState == "loading" || CLodopJsState == "complete") return;CLodopJsState = "loading";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;var JS1 = document.createElement("script");var JS2 = document.createElement("script");JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";JS2.src = "http://localhost:18000/CLodopfuncs.js";JS1.onload = JS2.onload = function () { CLodopJsState = "complete"; }// eslint-disable-next-line no-unused-varsJS1.onerror = JS2.onerror = function (evt) { CLodopJsState = "complete"; }head.insertBefore(JS1, head.firstChild);head.insertBefore(JS2, head.firstChild);CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}
//加载
if (needCLodop()) { loadCLodop(); }//获取LODOP对象主过程,判断是否安装、需否升级
function getLodop(oOBJECT, oEMBED) {var LODOP;try {var ua = navigator.userAgent;var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));if (needCLodop()) {try {// eslint-disable-next-line no-undefLODOP = getCLodop();// eslint-disable-next-line no-empty} catch (err) { }if (!LODOP && CLodopJsState !== "complete") {if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程.");return;}if (!LODOP) {// eslint-disable-next-line no-undefdocument.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;return;} else {// eslint-disable-next-line no-undefif (CLODOP.CVERSION < "4.1.2.3") {// eslint-disable-next-line no-undefdocument.body.innerHTML = strCLodopUpdate + document.body.innerHTML;}if (oEMBED && oEMBED.parentNode)oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素if (oOBJECT && oOBJECT.parentNode)oOBJECT.parentNode.removeChild(oOBJECT);}} else {var is64IE = isIE && !!(ua.match(/x64/i));//如果页面有Lodop就直接使用,否则新建if (oOBJECT || oEMBED) {if (isIE)LODOP = oOBJECT;elseLODOP = oEMBED;} else if (!CreatedOKLodopObject) {LODOP = document.createElement("object");LODOP.setAttribute("width", 0);LODOP.setAttribute("height", 0);LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");if (isIE)LODOP.setAttribute("classid", "clsid:2123C269-1E0C-4534-8141-A75355220B4CL");elseLODOP.setAttribute("type", "application/x-print-lodop");document.documentElement.appendChild(LODOP);CreatedOKLodopObject = LODOP} elseLODOP = CreatedOKLodopObject;//Lodop插件未安装时提示下载地址if ((!LODOP) || (!LODOP.VERSION)) {if (ua.indexOf('Chrome') >= 0)// eslint-disable-next-line no-undefdocument.body.innerHTML = strHtmChrome + document.body.innerHTML;if (ua.indexOf('Firefox') >= 0)// eslint-disable-next-line no-undefdocument.body.innerHTML = strHtmFireFox + document.body.innerHTML;// eslint-disable-next-line no-undefdocument.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;return LODOP;}}if (LODOP.VERSION < "6.2.2.6") {if (!needCLodop())// eslint-disable-next-line no-undefdocument.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;}return LODOP;} catch (err) {alert("getLodop出错:" + err);}
}export { getLodop };第二步：引入这个函数
import { getLodop } from "@/utils/lodopUtils";//自定义打印模板<div id="printContent"><table><tbody><tr>{/* rowspan="3" */}<td class="merge">会所</td><td class="merge">石家庄</td></tr><tr><td class="merge"></td><td class="merge">贵宾姓名：测试一</td></tr><tr ><td class="merge self-evaluation-row3"></td><td class="merge self-evaluation-row3">房间号：1012</td></tr><tr ><td rowspan="2" class="merge self-evaluation-row3">基本<br />信息</td><td class="merge">预收类型：违约金</td></tr><tr ><td class="merge self-evaluation-row3">消费日期：2023-06-14</td></tr><tr class="double1 self-evaluation-row"><td class="exp">产品名称</td><td class="exp" style={{ textAlign: 'center' }}>数量</td><td class="exp self-evaluation-mar4">单价</td><td class="exp">金额</td></tr><tr class="double1 self-evaluation-row1"><td class="exp1">违约金</td><td class="exp1" style={{ textAlign: 'center' }}>1</td><td class="exp1 self-evaluation-mar4">10000.00</td><td class="exp1">1000.00</td></tr><tr class='self-evaluation-row2'><td class='self-evaluation-row2' colspan="3" style={{ textAlign: 'left', borderTop: '1px solid #000000' }}>消费合计：</td><td class='self-evaluation-row2' style={{ borderTop: '1px solid #000000' }}>1000.00</td></tr></tbody></table></div>function print() {const operatingSystem = getOperatingSystem();if ('Mac' == operatingSystem) return message.error('苹果电脑暂不支持打印')console.log(operatingSystem);// return// 此处是需要打印的地方，可用id或者用ref标记let printContent = document.getElementById("printContent").innerHTML;let LODOP = getLodop();// var topLine = 4; // 起始行位置// var leftLine = 0.5; // 起始列位置// LODOP.PRINT_INIT("违约金小票_" + Math.random() * 10); // 初始化打印任务名称// LODOP.SET_PRINT_PAGESIZE(1, '9.3cm', '19.3cm', ""); // 设置纸张大小// LODOP.SET_PRINT_STYLE("FontSize", 10); // 设置字体大小// LODOP.SET_PRINT_STYLE("Bold", 0); // 设置字体是否加粗// // 添加打印文本// LODOP.ADD_PRINT_TEXT(topLine + 'cm', leftLine + 'cm', 100, 10, "会所：");// LODOP.ADD_PRINT_TEXT(topLine + 'cm', leftLine + 1.2 + 'cm', 300, 300, "石家庄会所"); // 这里直接写死了石家庄，您可能需要从您的数据中获取// LODOP.ADD_PRINT_TEXT(topLine + 1.95 + 'cm', leftLine + 'cm', 40, '5cm', "基本信息"); // 基本信息标题// LODOP.SET_PRINT_STYLE("Alignment", 1); // 设置文本对齐方式为居中// // 假设贵宾姓名从数据中动态获取// var guestName = "测试一"; // 这里假设是从数据中获取的贵宾姓名// LODOP.ADD_PRINT_TEXT(topLine + 0.7 + 'cm', leftLine + 1.2 + 'cm', guestName.length * 50, 10, "贵宾姓名：" + guestName); // 贵宾姓名// LODOP.ADD_PRINT_TEXT(topLine + 1.4 + 'cm', leftLine + 1.2 + 'cm', guestName.length * 50, 10, "房间号：1012"); // 房间号，这里也是写死的示例数据// LODOP.ADD_PRINT_TEXT(topLine + 2.1 + 'cm', leftLine + 1.2 + 'cm', guestName.length * 50, 10, "预收类型：违约金"); // 预收类型，这里也是写死的示例数据// LODOP.ADD_PRINT_TEXT(topLine + 2.8 + 'cm', leftLine + 1.2 + 'cm', guestName.length * 50, 10, "消费日期：2023-06-14"); // 消费日期，这里也是写死的示例数据// // 添加直线分隔线// // LODOP.ADD_PRINT_LINE(topLine + 3.8 + 'cm', leftLine + 'cm', topLine + 3.8 + 'cm', leftLine + 7.5 + 'cm', 0, 0.5);// LODOP.ADD_PRINT_LINE(topLine + 3.7 + 'cm', leftLine + 'cm', topLine + 3.7 + 'cm', leftLine + 7.5 + 'cm', 0, 0.5);// // 添加表头文本// LODOP.SET_PRINT_STYLE("Alignment", 1); // 设置文本对齐方式为居中// LODOP.ADD_PRINT_TEXT(topLine + 4.3 + 'cm', leftLine + 'cm', 80, 40, "产品名称");// LODOP.SET_PRINT_STYLE("Alignment", 2); // 设置文本对齐方式为右对齐// LODOP.ADD_PRINT_TEXT(topLine + 4.3 + 'cm', leftLine + 2.8 + 'cm', 40, 10, "数量");// LODOP.SET_PRINT_STYLE("Alignment", 3); // 设置文本对齐方式为左对齐// LODOP.ADD_PRINT_TEXT(topLine + 4.3 + 'cm', leftLine + 3.3 + 'cm', 80, 10, "单价");// LODOP.ADD_PRINT_TEXT(topLine + 4.3 + 'cm', leftLine + 5.4 + 'cm', 80, 10, "金额");// // 添加表格下的直线分隔线// // LODOP.ADD_PRINT_LINE(topLine + 4.9 + 'cm', leftLine + 'cm', topLine + 4.9 + 'cm', leftLine + 7.5 + 'cm', 2, 0.5);// LODOP.ADD_PRINT_LINE(topLine + 4.9 + 'cm', leftLine + 'cm', topLine + 4.9 + 'cm', leftLine + 7.5 + 'cm', 0, 0.5);// // 添加产品信息行，这里假设只有一条产品信息// var iCurLine = topLine + 5.2; // 当前行位置// LODOP.SET_PRINT_STYLE("Alignment", 1); // 设置文本对齐方式为居中// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 'cm', 80, 40, '违约金');// LODOP.SET_PRINT_STYLE("LineHeight", 15); // 设置行高为 15，增加上下间距// LODOP.SET_PRINT_STYLE("Alignment", 2); // 设置文本对齐方式为右对齐// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 2.8 + 'cm', 40, 10, '1');// LODOP.SET_PRINT_STYLE("Alignment", 3); // 设置文本对齐方式为左对齐// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 3.3 + 'cm', 80, 10, "10000.00"); // 违约金单价，这里也是写死的示例数据// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 5.4 + 'cm', 80, 10, "1000.00"); // 违约金金额，这里也是写死的示例数据// iCurLine += 0.8; // 下一行位置// LODOP.ADD_PRINT_LINE(iCurLine + 'cm', leftLine + 'cm', iCurLine + 'cm', leftLine + 7.5 + 'cm', 0, 0.5); // 添加直线// iCurLine += 0.4; // 下一行位置// LODOP.SET_PRINT_STYLE("Alignment", 1); // 设置文本对齐方式为居中// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 'cm', 80, 10, "消费合计：");// LODOP.SET_PRINT_STYLE("Alignment", 3); // 设置文本对齐方式为右对齐// LODOP.ADD_PRINT_TEXT(iCurLine + 'cm', leftLine + 5.4 + 'cm', 80, 10, "1000.00"); // 总金额，这里也是写死的示例数据// 添加消费合计上方的直线分隔线// 预览打印// LODOP.PREVIEW();// ----------------------//打印初始化-------------纸张的大小A3A4A5----打印机的任务名字LODOP.PRINT_INITA(0, 0, '297mm', '210mm', '打印任务1');//设定纸张大小LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4');//设置NP插件无返回，这可避免chrome（谷歌）等np插件浏览器对弹窗超时误报崩溃。LODOP.SET_SHOW_MODE('NP_NO_RESULT', true);//1横向，2纵向LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 2);// 可以自定义打印时的样式LODOP.ADD_PRINT_HTM("15mm","12mm","92%","90%",setPrintStyle() + printContent);// LODOP.ADD_PRINT_LINE(10, 5, 200, 5, 0, 0.5); // 从左上角 (10mm, 5mm) 到 (200mm, 5mm)，实线，线宽 0.5mm// 固定位置输出页码LODOP.ADD_PRINT_HTM(1050, 320, 300, 100, "<span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span>");// 标识每页都输出LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);// // 预览LODOP.PREVIEW();// // 预览打印// LODOP.PREVIEW();}function setPrintStyle() {// let cssHtml =// "<style>" +// "* {" +// " margin: 0;padding: 0; list-style: none;text-decoration: none;" +// "}" +// "table {border-collapse:collapse;}" +// // 添加下边框样式// "table tr td.exp { border-bottom: 1px solid red;border-top: 1px solid red; }" +// "table tr td.exp1 { border-bottom: 1px solid red;}" +// "</style>";// return cssHtml;//css样式let cssHtml ="<style>" +"* { margin: 0; padding: 0; list-style: none; text-decoration: none; }" +"table { border-collapse: collapse; }" +"table tr .exp { border-bottom: 1px solid #000000; border-top: 1px solid #000000; padding: 20px 0; }" +"table tr .exp1 { border-bottom: 1px solid #000000; padding: 20px 0; }" +"table tr.self-evaluation-row { padding: 15px 0; }" +"table tr.self-evaluation-row1 { padding: 15px 0; }" +"table tr td.self-evaluation-row2 { padding: 15px 0 0 0; }" +"table tr td.self-evaluation-row3 { padding: 0 0 20px 0; }" +"table tr td.self-evaluation-mar4 { padding: 0 10px 0px 0; }" +"</style>";return cssHtml;}//判断系统function getOperatingSystem() {const platform = navigator.platform.toLowerCase();if (platform.includes('mac')) return 'Mac';if (platform.includes('win')) return 'Windows';if (platform.includes('linux')) return 'Linux';if (platform.includes('android')) return 'Android';if (platform.includes('iphone') || platform.includes('ipad')) return 'iOS';return 'Unknown';}
自己写按钮事件 --- 对应上去就行 ----有什么问题---及时评论----谢谢