使用LODOP打印控件实现打印功能的解决方案

项目中有很多打印功能，一开始使用浏览器自带的打印功能，发现在不同的浏览打印效果上有着较大的差异，最终选择了LODOP打印控件来实现，记录下实现的大体思路。

1. LODOP的优势：

功能丰富：LODOP控件可以实现各种打印功能，如文字、图片、表格等，而且可以自定义页面大小、边距等参数。

易于使用：LODOP控件提供了简单易懂的API接口，使得应用程序开发者可以快速上手并实现需要的打印功能。

可定制性强：LODOP控件支持自定义纸张大小和分页设置，并且可以添加水印、背景等效果。

支持多种浏览器：LODOP控件支持多种主流浏览器，如IE、Chrome、Firefox等。

多语言支持：LODOP控件支持中文、英文等多种语言。

占用资源少：LODOP控件使用JavaScript实现，占用资源小，不会对系统造成负荷。

兼容性好：LODOP控件适用于各个操作系统，如Windows、Linux等。

安全防护：LODOP控件提供了完善的安全措施，如数字签名、加密功能等，确保用户数据的安全性。

2. 假设你电脑上已经安装了LODOP打印软件(下载LODOP)，那么在项目中将这段代码放到一个js文件里

// 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-vars
    JS1.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-undef
                LODOP = 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-undef
                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
                return;
            } else {
                // eslint-disable-next-line no-undef
                if (CLODOP.CVERSION < "4.1.2.3") {
                    // eslint-disable-next-line no-undef
                    document.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;
                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 (isIE)
                    LODOP.setAttribute("classid", "clsid:2123C269-1E0C-4534-8141-A75355220B4CL");
                else
                    LODOP.setAttribute("type", "application/x-print-lodop");
                document.documentElement.appendChild(LODOP);
                CreatedOKLodopObject = LODOP
            } else
                LODOP = CreatedOKLodopObject;
            //Lodop插件未安装时提示下载地址
            if ((!LODOP) || (!LODOP.VERSION)) {
                if (ua.indexOf('Chrome') >= 0)
                    // eslint-disable-next-line no-undef
                    document.body.innerHTML = strHtmChrome + document.body.innerHTML;
                if (ua.indexOf('Firefox') >= 0)
                    // eslint-disable-next-line no-undef
                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
                // eslint-disable-next-line no-undef
                document.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-undef
                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
        }

        return LODOP;
    } catch (err) {
        alert("getLodop出错:" + err);
    }
}

export {getLodop};

3.在需要打印的地方调用getLodop（）方法获取lodop对象，可以设置打印内容的样式

<div id="printContent">
    
div>            
<button @click="print">打印button>

import {getLodop} from "../lodopUtils.js";
      // 打印
      print(){
      	// 此处是需要打印的地方，可用id或者用ref标记
        let printContent = document.getElementById("printContent").innerHTML;
        let LODOP = getLodop();
        //打印初始化
        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%",
            this.setPrintStyle() + printContent
        );
        // 固定位置输出页码
        LODOP.ADD_PRINT_HTM(1050,320,300,100,"第##页/共##页");
        // 标识每页都输出
        LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
        // 预览
        LODOP.PREVIEW();
        // 直接打印使用
        //LODOP.PRINT();
      },
      	// 可自定义打印样式
		setPrintStyle() {
		      let cssHtml
		          = '';
		      return cssHtml;
    },

至此，就可以实现打印了，开发过程中有什么问题可以评论留言或者私信我啊！！！