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

ℳ墨尔本

已于 2024-05-11 20:04:34 修改

阅读量1.3w

点赞数 10

分类专栏：前端文章标签： vue.js 前端框架 javascript

于 2023-06-08 13:42:06 首次发布

本文链接：https://blog.csdn.net/jnsone/article/details/131048419

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

文章介绍了LODOP打印控件在项目中的应用，因其丰富的功能、易用性和良好的浏览器兼容性而选择使用。通过示例代码展示了如何在JavaScript中集成和调用LODOP，以及如何处理打印样式，强调了避免使用CSS3属性。此外，还列出了部分LODOP的常用API，帮助读者理解和使用这个打印工具。

摘要由CSDN通过智能技术生成

项目中有很多打印功能，一开始使用浏览器自带的打印功能，发现在不同的浏览打印效果上有着较大的差异，最终选择了`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`对象，可以设置打印内容的样式。注意：样式尽可能避免使用`css3`，笔者亲测，`css3`属性打印中或许不会生效

<div id="printContent">
    <!--打印的内容-->
    <table>
      <thead>
      <tr>
        <td colspan="4"></td>
      </tr>
      </thead>
      <caption>
        <p style="text-align: right;margin-bottom: 30px;">档案号：000001</p>
        <p class="head">这是你的表名</p>
      </caption>
      <tbody>
      <tr style="height: 50px;">
        <td class="title">姓名</td>
        <td class="content">俞莲舟</td>
        <td class="title">家庭住址</td>
        <td class="content">北京市海淀区中关村大街18号创新大厦15层666号</td>
      </tr>
      <tr style="height: 50px;">
        <td class="title">工作经历</td>
        <td class="exp" colspan="3">
          <p class="top">工作经历工作经历工作经历工作经历工作经历工作经历工作经历</p>
        </td>
      </tr>
      <tr style="height: 50px;">
        <td class="title" rowspan="2">自我评价</td>
        <td class="exp" colspan="3" style="border-bottom: 0;">
          <p class="top">非常好且牛啦啦啦啦啦啦啦啦啦啦啦</p>
        </td>
      </tr>
      <tr>
        <td class="exp" colspan="3" style="border-top: 0;">
          <p class="under">cdcdcdcdc</p>
        </td>
      </tr>
      <tr style="height: 100px;">
        <td class="title" rowspan="2">评审团意见</td>
        <td class="exp" colspan="3" style="border-bottom: 0;">
          <p class="top">LODOP控件提供了完善的安全措施，如数字签名、加密功能等，确保用户数据的安全性。</p>
        </td>
      </tr>
      <tr>
        <td class="exp" colspan="3" style="border-top: 0;">
          <p class="under">评审人签字：</p>
          <p class="under">ℳ墨尔本</p>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="4"></td>
      </tr>
      </tfoot>
    </table>
</div>            
<button @click="print">打印</button>

import {getLodop} from "../lodopUtils.js";

// 打印
function 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, "<span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span>");
    // 标识每页都输出
    LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
    // 预览
    LODOP.PREVIEW();
    // 直接打印使用
    //LODOP.PRINT();
}

// 可自定义打印样式
function setPrintStyle() {
    let cssHtml =
        "<style>" +
        "* {" +
        "margin: 0;padding: 0;outline: none;list-style: none;text-decoration: none;" +
        "}" +
        ".main {" +
        "   width: 100%;height:95%;overflow-y: auto;font-size: 16px;margin:0 20px;position: relative;" +
        "}" +
        ".head {font-size: 29px;text-align: center; padding-bottom: 5px;font-family: '黑体' !important;}" +
        "table thead,table tfoot{height:0px}" +
        "table thead tr, table tfoot tr{height:0px}" +
        "table thead td,table tfoot td{height:0px;border:none !important;}" +
        "table {text-align:center;border-collapse:collapse;border:0;font-family:'仿宋' !important;}" +
        "caption {padding-bottom:16px;}" +
        "table tr,td{padding:5px;border:1px solid #000000;}" +
        "table tr .title{width: 23% !important;padding: 3px;text-align: center;font-size:21px !important;}" +
        "table tr .content{width: 30% !important;padding: 3px;text-align: left;font-size:21px !important;}" +
        ".border{border-right:0 !important;border-left:0 !important}" +
        "table tr .exp{width: 80%;text-align: left;padding: 10px 0px 5px 10px;font-size:21px !important;position: relative;}" +
        "table tr .exp .top{font-size:21px !important;}" +
        "table tr .exp .under{text-align: right;padding: 3px 20px 3px 0;}" +
        "table tr:last-child td{border: 1px solid black;}" +
        "</style>";
    return cssHtml;
}

打印效果
在这里插入图片描述

至此，就可以实现打印了！

4. 附上Lodop打印控件常用API

函数名	作用
初始化运行环境 `PRINT_INIT(strTaskName)`	初始化运行环境，清理异常打印遗留的系统资源，设定打印任务名。每个打印事务至少初始化一次，任务名要尽量区别于其它打印任务，譬如用“XX单位_XX管理信息系统_XX子系统_XX模块_XX打印作业”字样
设定纸张大小 `SET_PRINT_PAGESIZE(intOrient, PageWidth,PageHeight,strPageName)`	设定纸张大小，建议打印初始化之后调用。例：`LODOP.SET_PRINT_PAGESIZE(1,2100,2970,"");` 设置纸张大小为：宽210mm*高297mm，纵向打印；`LODOP.SET_PRINT_PAGESIZE(2, 0, 0,"A4");`设置纸张为A4（按操作系统定义的A4尺寸），横向打印
增加超文本打印项(普通模式) `ADD_PRINT_HTM(Top,Left,Width,Height,strHtmlContent)`	增加超文本打印项(普通模式)，超文本代码内容，字符型，未限制长度。可以是一个完整的页面超文本代码，或者是一个代码段落，也可以是URL:web地址形式的URL地址。代码中若包含style="page-break-after:always"或style=“page-break-before:always”，该元素称为“强制分页元素”，控件会在该元素处分页。例：`LODOP.ADD_PRINT_HTM(0,0, 300,100,"<hr><font size=5>hello </font>");`
增加表格打印项（超文本模式）`ADD_PRINT_TABLE(Top,Left,Width,Height,strHtml)`	打印表格建议使用该函数，在当前页展示不下时，会自动将行方到下一页中展示。复杂表格可能会有问题。另外style="page-break-after:always"在该函数中不生效。
增加直线 `ADD_PRINT_LINE(Top1,Left1, Top2, Left2,intLineStyle, intLineWidth)`	增加直线，设定直线的两个端点，设定直线的线条类型和线宽。intLineStyle：线条类型，数字型，0–实线 1–破折线 2–点线 3–点划线 4–双点划线缺省线条是实线。
设置打印份数 `SET_PRINT_COPIES(intCopies);`	设置本次打印的份数。例：`LODOP.SET_PRINT_COPIES(2);`