lodop打印

qq_2524963996

于 2024-06-19 09:20:13 发布

阅读量29

点赞数

文章标签：前端前端框架 javascript

本文链接：https://blog.csdn.net/qq_44161703/article/details/139789986

版权

第一步：引入相关的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-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 };

第二步：引入这个函数

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';
    }

自己写按钮事件 --- 对应上去就行 ----有什么问题---及时评论----谢谢