vue2.6+lodop实现静默打印

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

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

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

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

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

image

 

重点来啦！！！

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.在具体业务xxx.vue页面调用： 




<!-- 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?.data
        this.printInfo.serialNumber = printSerialNumber
        if (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.printList
      const printInfo = this.printInfo
      let 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>
      `;
    },




 




开箱即用！


 







		

		
posted @ 
2025-12-01 21:32 
星期7 
阅读(1) 
评论(0) 
 
收藏 
举报