vue2.6+lodop实现静默打印

前提：lodop插件高级服务需要付费，基础功能免费！！！

lodop下载地址：https://www.lodop.net/download.html

需求说明：由于打印的内容属于机密信息不可展示要进行静默密封打印，所以调用浏览器自带的打印功能有个预览弹窗，这样信息就泄露了，最后采用lodop实现静默打印！

1.首先去官网下载驱动安装到本地电脑（根据操作系统安装对应的版本）

2.安装好插件可以在本地电脑看到：

 

重点来啦！！！

1.首先在vue项目的public文件夹下面的index.html文件引入打印服务：

<script src="<%= BASE_URL %>webdocs/lodop/LodopFuncs.js"></script>

public\webdocs\LodopFuncs.js文件：

//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==


//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS ="CLodopfuncs.js",
    URL_WS1   = "ws://localhost:8000/"+MainJS,                //ws用8000/18000
    URL_WS2   = "ws://localhost:18000/"+MainJS,
    URL_HTTP1 = "http://localhost:8000/"+MainJS,              //http用8000/18000
    URL_HTTP2 = "http://localhost:18000/"+MainJS,
    URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS;   //https用8000/8443

var 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); else
          head.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过程."); else
                    alert("网页还没下载完毕，请稍等一下再操作.");
                return;
            }
            var strAlertMessage;
            if (!LODOP) {
                if (isLinuxX86)
                    strAlertMessage = strLodop7Install_X86;
                else if (isLinuxARM)
                    strAlertMessage = strLodop7Install_ARM;
                else
                    strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");
                // document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
                return;
            } else {
                if (isLinuxX86 && LODOP.CVERSION < "7.1.0.5")
                    strAlertMessage = strLodop7Update_X86;
                else if (isLinuxARM && LODOP.CVERSION < "7.1.0.5")
                    strAlertMessage = strLodop7Update_ARM;
                else if (CLODOP.CVERSION < "6.6.2.8")
                    strAlertMessage = strCLodopUpdate;

                // if (strAlertMessage)
                    // document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
            }
        } else {
            //==如果页面有Lodop插件就直接使用,否则新建:==
            if (oOBJECT || oEMBED) {
                if (isWinIE)
                    LODOP = oOBJECT;
                else
                    LODOP = 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");
                else
                    LODOP.setAttribute("type", "application/x-print-lodop");
                document.documentElement.appendChild(LODOP);
                CreatedOKLodopObject = LODOP;
            } else
                LODOP = 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);
    }
}

lodopService.js文件：

import { MessageBox } from "ebs-ui"
let LODOP = getLodop(); // 从全局获取 LODOP 对象
export function initLodop() {if (!LODOP || !LODOP.VERSION) {// alert("请先安装 Lodop 打印控件！");// 可以在这里跳转到 Lodop 下载页面// window.open('http://www.lodop.net/download.html');MessageBox.alert(`<strong>请先安装 Lodop 打印控件！</strong><br/><a href="http://www.lodop.net/download.html" target="_blank">点击下载</a>`,'提示', {dangerouslyUseHTMLString: true});return null;}return LODOP;
}/*** 执行静默打印* @param {string} htmlContent - 要打印的 HTML 内容字符串* @param {string} printerName - 目标打印机名称 (可选)*/
export function silentPrint(htmlContent, printerName = "") {const lodop = initLodop();if (!lodop) return;// 1. 新建一个打印任务lodop.PRINT_INIT("静默打印任务");// 2. 设置打印模式为“无预览”// 0: 弹出预览窗口// 1: 不弹出预览窗口，直接打印lodop.SET_PRINT_MODE("PRINT_NO_PREVIEW", 1);// 3. (可选) 指定打印机if (printerName) {lodop.SET_PRINTER_INDEXA(printerName);}// 设置 A4 纸LODOP.SET_PRINT_PAGESIZE(1, "210mm", "297mm", "A4");// 4. 添加要打印的 HTML 内容// ADD_PRINT_HTM 参数：top, left, width, height, html// 让 HTML 占满整个打印区域 这里我们设置宽度为 100%，高度自适应lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", htmlContent);// 5. 执行打印// PRINT() 会返回一个整数，代表打印任务的状态const printResult = lodop.PRINT();// 6. 检查打印结果if (printResult === 0) {console.log("打印任务已成功发送。");return true;} else {console.error("打印失败，错误码:", printResult);alert(`打印失败，请检查打印机是否正常。错误码: ${printResult}`);return false;}
}/*** 获取所有已安装的打印机名称列表*/
export function getPrinters() {const lodop = initLodop();if (!lodop) return [];const printers = [];const count = lodop.GET_PRINTER_COUNT();for (let i = 0; i < count; i++) {printers.push(lodop.GET_PRINTER_NAME(i));}return printers;
}

 

2.在具体页面调用： 

<!-- lodop静默打印 --><el-button type="primary"  @click="lodoPrint">打印</el-button>

import { silentPrint } from "@/utils/lodopService.js"

async lodoPrint(){try {this.printList.splice(0)this.printInfo.serialNumber = ''// 1. 先查询数据const res = await fetchPrintData({committeeId: this.committeeForm.id})console.log('打印数据',res)const { applicationList,printSerialNumber } = res?.data?.datathis.printInfo.serialNumber = printSerialNumberif (applicationList && Array.isArray(applicationList)) {applicationList.forEach(item => {if (item.recordList && Array.isArray(item.recordList)) {// 将affirmFlag为'1'的记录添加到printList中item.recordList.forEach(record => {if (record.affirmFlag === '1') {this.printList.push(record)}})}})}const printContent = this.generatePrintHtml()console.log('密封打印内容：',printContent)// 2. 调用静默打印服务
        silentPrint(printContent)} catch (error) {console.error('打印数据加载失败', error)} finally {}},// 3接口数据生成完整的打印 HTML（不渲染到页面！）
    generatePrintHtml() {const data = this.printListconst printInfo = this.printInfolet tableHtml = ''if (data || Array.isArray(data) || data.length > 0) {tableHtml = data.map((item,index) => {return `<tr><td>${index+1}</td><td>${item.expertName}</td><td>${item.expertTel}</td><td>${item.workCompanyName}</td><td>${item.expertMajor}</td></tr>`}).join('')}return `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>body { font-family: SimSun, "Microsoft YaHei", sans-serif;font-size: 14pt;padding:20px;margin: 0;padding: 0; }.print-wrapper {/*width: 210mm;*//*padding: 10mm;*/display: flex;justify-content: center;align-items: center;font-family: SimSun, "Microsoft YaHei", sans-serif;}.a4-page {max-width: 210mm;margin: 0 auto;/*padding: 10mm 0;*/box-sizing: border-box;}.print-tite { text-align: center;letter-spacing: 2px; }.print-tite p{ margin: 10px; }.print-table { width: 100%;border-collapse: collapse;font-family: Arial, sans-serif;font-size: 12px;border-bottom: none; margin-top: -2px;}.print-table td {border: 1px solid #000; /* 为所有单元格添加黑色边框 */padding: 8px 12px; /* 内边距，让内容不紧贴边框 */word-break: break-all;/* 当内容过长时自动换行，防止单元格被撑破 */}.print-table .print-label {font-weight: bold;text-align: center;width: 100px; /* 固定标签列宽度，使表格更整齐 */}.print-table .print-text { text-align: left; }.print-tab-title {text-align: center;/*font-size: 16px;*/letter-spacing: 2px;line-height: 36px;height: 36px;border-left: 1px solid #13161E;border-right: 1px solid #13161E;box-sizing: border-box;/*margin-top: -2px;*/}.tab-orgin { border: 1px solid #13161E;border-collapse: collapse;}.tab-orgin th{ font-size: 14px; font-weight: 700; text-align: center;padding: 6px;height: 24px;}.tab-orgin tbody tr td{text-align: center;font-size: 14px;line-height: 1.5;padding: 8px;}</style></head><body><div class="print-wrapper"><div class="a4-page print-only-content" id="printContent" ref="printArea" style="max-width: 210mm;margin: 0 auto;padding: 10mm;box-sizing: border-box;"><div class="print-tite"><p>大米集团有限公司</p><p>打卡记录表</p></div><table class="print-table"><tr><td class="print-label">项目编号</td><td class="print-text" colspan="3">${printInfo.mainCode}</td></tr><tr><td class="print-label">项目名称</td><td class="print-text" colspan="3">${printInfo.mainName}</td></tr><tr><td class="print-label">委托单位</td><td class="print-text" colspan="3">${printInfo.companyName}</td></tr><tr><td class="print-label">打卡时间</td><td class="print-text">${printInfo.extractTime}</td><td class="print-label">预计打卡耗时</td><td class="print-text">${printInfo.intervalTime}</td></tr><tr><td class="print-label">打卡人</td><td class="print-text">${printInfo.linkPerson}</td><td class="print-label">所属部门</td><td class="print-text">${printInfo.deptName}</td></tr><tr><td class="print-label">监督人</td><td class="print-text"></td><td class="print-label">打印流水</td><td class="print-text">${ printInfo.mainCode + '-' + printInfo.serialNumber }</td></tr></table><div class="print-tab-title">打卡结果</div><table border="1" class="tab-orgin"><thead><tr><th width="60">序号</th><th width="120">姓名</th><th width="120">电话</th><th width="220">工作单位</th><th width="220">岗位</th></tr></thead><tbody>${tableHtml}</tbody></table></div></div></body></html>
      `;},

 

开箱即用！