目录
一、案例截图
二、官方网站
三、安装CLodop_Setup_for_Win32NT
四、LodopFuncs.js
五、实现打印
六、Gitee源码
一、案例截图
点击打印按钮，可以在线发送给打印机打印。
打印预览页面：
二、官方网站
这是地址：下载中心 - Lodop和C-Lodop官网主站
直接点击下载就行，主要用到的就是官方提供的2个文件，分别是LodopFuncs.js和CLodop_Setup_for_Win32NT，就可以实现在线打印了。
三、安装CLodop_Setup_for_Win32NT
双击无脑点击下一步就行了。
安装成功页面：
四、LodopFuncs.js
工具类我统一放在了这里，仅供参考：
官方的拿过来不能直接使用，会报错，我微调了如下：
1、这里需要对外开放getLodop方法。
2、其次修改了这里。
否则会报如下错误：checkOrTryHttp is not defined ReferenceError: checkOrTryHttp is not defined at <anonymous>:1:1
下面是我调整好的代码，直接一键复制使用即可。
完整代码：
//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS ="CLodopfuncs.js",URL_WS1 = "ws://localhost:8000/"+MainJS, //ws用8000/18000URL_WS2 = "ws://localhost:18000/"+MainJS,URL_HTTP1 = "http://localhost:8000/"+MainJS, //http用8000/18000URL_HTTP2 = "http://localhost:18000/"+MainJS,URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS; //https用8000/8443var CreatedOKLodopObject, CLodopIsLocal, LoadJsState;//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {try {var ua = navigator.userAgent;if (ua.match(/Windows\sPhone/i) ||ua.match(/iPhone|iPod|iPad/i) ||ua.match(/Android/i) ||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;}
}//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {if (window.getCLodop) {LoadJsState = "complete";return true;}if (LoadJsState == "loadingB" || LoadJsState == "complete") return;LoadJsState = "loadingB";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;var JS1 = document.createElement("script"),JS2 = document.createElement("script"),JS3 = document.createElement("script");JS1.src = URL_HTTP1;JS2.src = URL_HTTP2;JS3.src = URL_HTTP3;JS1.onload = JS2.onload = JS3.onload = JS2.onerror = JS3.onerror=function(){LoadJsState = "complete";}JS1.onerror = function(e) {if (window.location.protocol !== 'https:')head.insertBefore(JS2, head.firstChild); elsehead.insertBefore(JS3, head.firstChild);}head.insertBefore(JS1,head.firstChild);
}//==加载Lodop对象的主过程:==
(function loadCLodop(){if (!needCLodop()) return;CLodopIsLocal = !!((URL_WS1 + URL_WS2).match(/\/\/localho|\/\/127.0.0./i));LoadJsState = "loadingA";if (!window.WebSocket && window.MozWebSocket) window.WebSocket=window.MozWebSocket;//ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:try {var WSK1=new WebSocket(URL_WS1);WSK1.onopen = function(e) { setTimeout(checkOrTryHttp,200); }WSK1.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}WSK1.onerror = function(e) {var WSK2=new WebSocket(URL_WS2);WSK2.onopen = function(e) {setTimeout(checkOrTryHttp,200);}WSK2.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}WSK2.onerror= function(e) {checkOrTryHttp();}}} catch(e){checkOrTryHttp();}
})();//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {var strFontTag = "<br><font color='#FF00FF'>打印控件";var strLodopInstall = strFontTag + "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";var strLodop64Install = strFontTag + "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";var strLodop64Update = strFontTag + "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";var strCLodopInstallA = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";var strLodop7HrefX86 = "点击这里<a href='Lodop7_Linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";var strLodop7HrefARM = "点击这里<a href='Lodop7_Linux_ARM64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";var strLodop7Install_X86 = strLodop7FontTag + "未安装启动，" + strLodop7HrefX86;var strLodop7Install_ARM = strLodop7FontTag + "未安装启动，" + strLodop7HrefARM;var strLodop7Update_X86 = strLodop7FontTag + "需升级，" + strLodop7HrefX86;var strLodop7Update_ARM = strLodop7FontTag + "需升级，" + strLodop7HrefARM;var strInstallOK = "，成功后请刷新本页面或重启浏览器。</font>";var LODOP;try {var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent));var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));if (needCLodop() || isLinuxX86 || isLinuxARM) {try {LODOP = window.getCLodop();} catch (err) {}if (!LODOP && LoadJsState !== "complete") {if (!LoadJsState)alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程."); elsealert("网页还没下载完毕，请稍等一下再操作.");return;}var strAlertMessage;if (!LODOP) {if (isLinuxX86)strAlertMessage = strLodop7Install_X86;else if (isLinuxARM)strAlertMessage = strLodop7Install_ARM;elsestrAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;return;} else {if (isLinuxX86 && LODOP.CVERSION < "7.1.0.1")strAlertMessage = strLodop7Update_X86;else if (isLinuxARM && LODOP.CVERSION < "7.1.0.1")strAlertMessage = strLodop7Update_ARM;else if (CLODOP.CVERSION < "6.6.2.1")strAlertMessage = strCLodopUpdate;if (strAlertMessage)document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;}} else {//==如果页面有Lodop插件就直接使用,否则新建:==if (oOBJECT || oEMBED) {if (isWinIE)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 (isWinIE)LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");elseLODOP.setAttribute("type", "application/x-print-lodop");document.documentElement.appendChild(LODOP);CreatedOKLodopObject = LODOP;} elseLODOP = CreatedOKLodopObject;//==Lodop插件未安装时提示下载地址:==if ((!LODOP) || (!LODOP.VERSION)) {document.body.innerHTML = (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK + document.body.innerHTML;return LODOP;}if (LODOP.VERSION < "6.2.2.6") {document.body.innerHTML = (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK + document.body.innerHTML;}}//===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================//===============================================================================return LODOP;} catch (err) {alert("getLodop出错:" + err);}
}export { getLodop }五、实现打印
这里我预先安装了Element-UI组件，没有安装的看官方文档：Element - The world's most popular Vue UI framework
1、先引入JS方法。
import { getLodop } from "@/utils/LodopFuncs"2、打印功能的关键代码。
printTable(){let LODOP = getLodop();if(!LODOP){this.$message.error("未安装打印插件");return;}LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')LODOP.ADD_PRINT_HTM(15,0,'100%', '100%', document.getElementById('form').innerHTML)LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Width:100%;Height:100%')LODOP.PREVIEW();this.$message.success('已发送至打印机');
},3、完整代码
<template><div><el-button type="danger" @click="printTable">打印</el-button><div id="form"><h2 style="text-align: center">合同信息</h2><table border="1" style="border-collapse: collapse; width: 100%;"><thead><tr><th>合同编号</th><th>合同名称</th><th>合同类型</th><th>合同金额</th><th>合同签署时间</th><th>签署人</th><th>合同状态</th><th>合同有效期</th><th>文件名</th><th>备注</th></tr></thead><tbody><tr v-for="contract in contracts" :key="contract.id"><td>{{ contract.contractNumber }}</td><td>{{ contract.contractName }}</td><td>{{ contract.contractType }}</td><td>{{ contract.contractAmount }}</td><td>{{ contract.signingDate }}</td><td>{{ contract.signer }}</td><td>{{ contract.status }}</td><td>{{ contract.validityPeriod }}</td><td>{{ contract.fileName }}</td><td>{{ contract.notes }}</td></tr></tbody></table></div></div></template><script>
import { getLodop } from "@/utils/LodopFuncs"
export default {name: 'HomeView',data() {return {contracts: [{id: 1, contractNumber: 'H001', contractName: '服务合同A', contractType: '服务', contractAmount: '5000',signingDate: '2025-01-15', signer: '张三', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_A.pdf', notes: '无'},{id: 2, contractNumber: 'H002', contractName: '产品采购B', contractType: '采购', contractAmount: '15000',signingDate: '2025-01-20', signer: '李四', status: '有效', validityPeriod: '2026-01-20', fileName: 'contract_B.pdf', notes: '急需'},{id: 3, contractNumber: 'H003', contractName: '合作协议C', contractType: '合作', contractAmount: '8000',signingDate: '2025-02-05', signer: '王五', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_C.pdf', notes: '审核中'},{id: 4, contractNumber: 'H004', contractName: '租赁合同D', contractType: '租赁', contractAmount: '20000',signingDate: '2025-02-10', signer: '赵六', status: '有效', validityPeriod: '2026-02-10', fileName: 'contract_D.pdf', notes: '续租'},{id: 5, contractNumber: 'H005', contractName: '咨询合同E', contractType: '咨询', contractAmount: '3000',signingDate: '2025-02-15', signer: '钱七', status: '有效', validityPeriod: '2025-12-15', fileName: 'contract_E.pdf', notes: '无'},{id: 6, contractNumber: 'H006', contractName: '服务合同F', contractType: '服务', contractAmount: '6000',signingDate: '2025-02-20', signer: '孙八', status: '有效', validityPeriod: '2026-02-20', fileName: 'contract_F.pdf', notes: '定期检查'},{id: 7, contractNumber: 'H007', contractName: '采购合同G', contractType: '采购', contractAmount: '25000',signingDate: '2025-03-01', signer: '周九', status: '有效', validityPeriod: '2026-03-01', fileName: 'contract_G.pdf', notes: '紧急订单'},{id: 8, contractNumber: 'H008', contractName: '协议合同H', contractType: '协议', contractAmount: '7000',signingDate: '2025-03-05', signer: '吴十', status: '有效', validityPeriod: '2025-09-05', fileName: 'contract_H.pdf', notes: '待续签'},{id: 9, contractNumber: 'H009', contractName: '建设合同I', contractType: '建设', contractAmount: '100000',signingDate: '2025-03-10', signer: '郑十一', status: '有效', validityPeriod: '2027-03-10', fileName: 'contract_I.pdf', notes: '需监理'},{id: 10, contractNumber: 'H010', contractName: '开发合同J', contractType: '开发', contractAmount: '40000',signingDate: '2025-03-15', signer: '冯十二', status: '有效', validityPeriod: '2026-03-15', fileName: 'contract_J.pdf', notes: '阶段性支付'},{id: 11, contractNumber: 'H011', contractName: '许可协议K', contractType: '许可', contractAmount: '9500',signingDate: '2025-03-16', signer: '陈十三', status: '有效', validityPeriod: '2025-11-16', fileName: 'contract_K.pdf', notes: '无'},{id: 12, contractNumber: 'H012', contractName: '保密合同L', contractType: '保密', contractAmount: '3000',signingDate: '2025-03-17', signer: '蔡十四', status: '有效', validityPeriod: '2025-12-17', fileName: 'contract_L.pdf', notes: '无'},{id: 13, contractNumber: 'H013', contractName: '转让协议M', contractType: '转让', contractAmount: '12000',signingDate: '2025-03-18', signer: '杜十五', status: '有效', validityPeriod: '2026-03-18', fileName: 'contract_M.pdf', notes: '待确认'},{id: 14, contractNumber: 'H014', contractName: '委托合同N', contractType: '委托', contractAmount: '5000',signingDate: '2025-03-19', signer: '李十六', status: '有效', validityPeriod: '2025-11-19', fileName: 'contract_N.pdf', notes: '无'},{id: 15, contractNumber: 'H015', contractName: '资产购买合同O', contractType: '购买', contractAmount: '200000',signingDate: '2025-03-20', signer: '沈十七', status: '有效', validityPeriod: '2028-03-20', fileName: 'contract_O.pdf', notes: '融资中'},{id: 16, contractNumber: 'H016', contractName: '融资协议P', contractType: '融资', contractAmount: '50000',signingDate: '2025-03-21', signer: '冯十八', status: '有效', validityPeriod: '2026-03-21', fileName: 'contract_P.pdf', notes: '审计中'},{id: 17, contractNumber: 'H017', contractName: '市场推广合同Q', contractType: '推广', contractAmount: '7000',signingDate: '2025-03-22', signer: '朱十九', status: '有效', validityPeriod: '2026-03-22', fileName: 'contract_Q.pdf', notes: '待沟通'},{id: 18, contractNumber: 'H018', contractName: '财务顾问合同R', contractType: '顾问', contractAmount: '5000',signingDate: '2025-03-23', signer: '巴二十', status: '有效', validityPeriod: '2025-09-23', fileName: 'contract_R.pdf', notes: '无'},{id: 19, contractNumber: 'H019', contractName: '法律顾问合同S', contractType: '顾问', contractAmount: '15000',signingDate: '2025-03-24', signer: '许二一', status: '有效', validityPeriod: '2026-03-24', fileName: 'contract_S.pdf', notes: '无'},{id: 20, contractNumber: 'H020', contractName: '跨国采购合同T', contractType: '采购', contractAmount: '18000',signingDate: '2025-03-25', signer: '何二二', status: '有效', validityPeriod: '2026-03-25', fileName: 'contract_T.pdf', notes: '无'},{id: 21, contractNumber: 'H001', contractName: '服务合同A', contractType: '服务', contractAmount: '5000',signingDate: '2025-01-15', signer: '张三', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_A.pdf', notes: '无'},{id: 22, contractNumber: 'H002', contractName: '产品采购B', contractType: '采购', contractAmount: '15000',signingDate: '2025-01-20', signer: '李四', status: '有效', validityPeriod: '2026-01-20', fileName: 'contract_B.pdf', notes: '急需'},{id: 23, contractNumber: 'H003', contractName: '合作协议C', contractType: '合作', contractAmount: '8000',signingDate: '2025-02-05', signer: '王五', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_C.pdf', notes: '审核中'},{id: 24, contractNumber: 'H004', contractName: '租赁合同D', contractType: '租赁', contractAmount: '20000',signingDate: '2025-02-10', signer: '赵六', status: '有效', validityPeriod: '2026-02-10', fileName: 'contract_D.pdf', notes: '续租'},{id: 25, contractNumber: 'H005', contractName: '咨询合同E', contractType: '咨询', contractAmount: '3000',signingDate: '2025-02-15', signer: '钱七', status: '有效', validityPeriod: '2025-12-15', fileName: 'contract_E.pdf', notes: '无'},{id: 26, contractNumber: 'H006', contractName: '服务合同F', contractType: '服务', contractAmount: '6000',signingDate: '2025-02-20', signer: '孙八', status: '有效', validityPeriod: '2026-02-20', fileName: 'contract_F.pdf', notes: '定期检查'},{id: 27, contractNumber: 'H007', contractName: '采购合同G', contractType: '采购', contractAmount: '25000',signingDate: '2025-03-01', signer: '周九', status: '有效', validityPeriod: '2026-03-01', fileName: 'contract_G.pdf', notes: '紧急订单'},{id: 28, contractNumber: 'H008', contractName: '协议合同H', contractType: '协议', contractAmount: '7000',signingDate: '2025-03-05', signer: '吴十', status: '有效', validityPeriod: '2025-09-05', fileName: 'contract_H.pdf', notes: '待续签'},{id: 29, contractNumber: 'H009', contractName: '建设合同I', contractType: '建设', contractAmount: '100000',signingDate: '2025-03-10', signer: '郑十一', status: '有效', validityPeriod: '2027-03-10', fileName: 'contract_I.pdf', notes: '需监理'},{id: 30, contractNumber: 'H010', contractName: '开发合同J', contractType: '开发', contractAmount: '40000',signingDate: '2025-03-15', signer: '冯十二', status: '有效', validityPeriod: '2026-03-15', fileName: 'contract_J.pdf', notes: '阶段性支付'},{id: 31, contractNumber: 'H011', contractName: '许可协议K', contractType: '许可', contractAmount: '9500',signingDate: '2025-03-16', signer: '陈十三', status: '有效', validityPeriod: '2025-11-16', fileName: 'contract_K.pdf', notes: '无'},{id: 32, contractNumber: 'H012', contractName: '保密合同L', contractType: '保密', contractAmount: '3000',signingDate: '2025-03-17', signer: '蔡十四', status: '有效', validityPeriod: '2025-12-17', fileName: 'contract_L.pdf', notes: '无'},{id: 33, contractNumber: 'H013', contractName: '转让协议M', contractType: '转让', contractAmount: '12000',signingDate: '2025-03-18', signer: '杜十五', status: '有效', validityPeriod: '2026-03-18', fileName: 'contract_M.pdf', notes: '待确认'},{id: 34, contractNumber: 'H014', contractName: '委托合同N', contractType: '委托', contractAmount: '5000',signingDate: '2025-03-19', signer: '李十六', status: '有效', validityPeriod: '2025-11-19', fileName: 'contract_N.pdf', notes: '无'},{id: 35, contractNumber: 'H015', contractName: '资产购买合同O', contractType: '购买', contractAmount: '200000',signingDate: '2025-03-20', signer: '沈十七', status: '有效', validityPeriod: '2028-03-20', fileName: 'contract_O.pdf', notes: '融资中'},{id: 36, contractNumber: 'H016', contractName: '融资协议P', contractType: '融资', contractAmount: '50000',signingDate: '2025-03-21', signer: '冯十八', status: '有效', validityPeriod: '2026-03-21', fileName: 'contract_P.pdf', notes: '审计中'},{id: 37, contractNumber: 'H017', contractName: '市场推广合同Q', contractType: '推广', contractAmount: '7000',signingDate: '2025-03-22', signer: '朱十九', status: '有效', validityPeriod: '2026-03-22', fileName: 'contract_Q.pdf', notes: '待沟通'},{id: 38, contractNumber: 'H018', contractName: '财务顾问合同R', contractType: '顾问', contractAmount: '5000',signingDate: '2025-03-23', signer: '巴二十', status: '有效', validityPeriod: '2025-09-23', fileName: 'contract_R.pdf', notes: '无'},{id: 39, contractNumber: 'H019', contractName: '法律顾问合同S', contractType: '顾问', contractAmount: '15000',signingDate: '2025-03-24', signer: '许二一', status: '有效', validityPeriod: '2026-03-24', fileName: 'contract_S.pdf', notes: '无'},{id: 40, contractNumber: 'H020', contractName: '跨国采购合同T', contractType: '采购', contractAmount: '18000',signingDate: '2025-03-25', signer: '何二二', status: '有效', validityPeriod: '2026-03-25', fileName: 'contract_T.pdf', notes: '无'}]};},methods:{printTable(){let LODOP = getLodop();if(!LODOP){this.$message.error("未安装打印插件");return;}LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')LODOP.ADD_PRINT_HTM(15,0,'100%', '100%', document.getElementById('form').innerHTML)LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Width:100%;Height:100%')LODOP.PREVIEW();this.$message.success('已发送至打印机');},}
}
</script>
六、Gitee源码
码云地址：Vue2+Lodop插件实现在线打印功能
