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

已于 2024-04-01 09:06:40 修改
阅读量8.3k 收藏 15
点赞数 4
分类专栏： 前端 文章标签： vue.js 前端框架 javascript
于 2023-06-08 13:42:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jnsone/article/details/131048419
版权

项目中有很多打印功能，一开始使用浏览器自带的打印功能，发现在不同的浏览打印效果上有着较大的差异，最终选择了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);

使用过程中过程中有什么问题可以评论区留言或者私信我啊！！！

ℳ墨尔本
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 24
    评论
专栏目录
Web开发-Lodop打印控件实践
11-27
Web开发，我们常常会用到打印的功能。 Lodop是Web开发常用的打印组件，方便快捷！！ lodop在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来，支持通过CSS来调整布局。
Vue中使用Lodop插件实现打印功能的简单方法
10-15
主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Lodop关联内容分页打印
Bruce__taotao的博客
02-28 450
Lodop打印插件使用系列，本文交流下比较常用的需求。在打印的页面里面有2个或多个table，它们的高度不固定。这种情况也要实现分页。大概2个方向的思路，思路1自行计算高度，在需要换页的时候，调用Lodop的api。自己处理页码。思路2:2个table自动分页。这里研究下思路2的大概实现。本文记录在使用Lodop需要关联打印项，来达到不定高度的table能相对布局。接着讨论table内嵌条形码的实现方式。
C-Lodop使用说明
hahahappp的博客
12-15 1595
C-Lodop使用说明
vue + Lodop打印控件的使用
飞猪
09-27 1674
当你的程序采用预览打印语句(如PREVIEW、PREVIEWA等)且预览窗口正常大小时，是完全免费的，输出结果没有水印。仅当采用直接打印语句(如PRINT、PRINTA等)或预览窗口过小时，打印结果的左下角会出现如下两种样式的水印。还有一种方法是不花钱去注册，也就是打印预览的方式去打印，一个物料码一个物料码的打印（同一个物料码可以打印多张）2.安装打印驱动（我的是得力打印机，根据打印机机型，去得力官网下载对应的打印驱动并安装）LodopFuncs.js放在项目中，打印的页面中注册引入进去。
使用Lodop控件打印表单和二维码
weixin_45111741的博客
12-16 1万+
1.了解lodop 1.1Lodop的定义 Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句一样。 1.2Lodop的下载 下载链接：http://www.lodop.net/download.html 一路安装就行，安装好之后解压 可以跟着示例一个一个学习，不懂的地方结合源代码一起学习 2.在页面中引入lodop (必须要安装lodop才行，不然没有效果) 在页面中嵌入l
lodop的基本使用和常用API的详细介绍
weixin_63203565的博客
06-22 6271
功能丰富：LODOP 允许网页中进行高度自定义的打印操作，包括添加文本、图像、表格等内容，设置纸张尺寸和方向，调整对象的风格和布局，控制打印机的设置等HTML 内容支持：LODOP 支持添加 HTML 内容到打印任务中，可以通过方法将 HTML 代码呈现为打印内容，可以灵活地处理复杂的格式和布局需求对象风格控制：通过方法，可以为打印任务中的对象（如文本、图像、表格等）设置各种风格，包括字体大小、字体名称、加粗、对齐方式、边框样式等，从而实现个性化的打印效果。
使用vue进行Lodop打印的一些方法
字节叔叔
06-11 6288
一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例。
指定打印机打印、条码 、小票打印 web端打印机控件 LODOP的使用
qq_41629498的博客
08-08 4519
最近项目需要指定打印机进行前台后厨小票同时打印 1.首先安装LODOP插件点击下载 2 将LodopFuncs.js文件复制到自己项目 注意：vue项目需要底部添加 export { getLodop } 3获取当前连接的打印机设备名称 添加前台或者后厨 或者热菜 凉菜 let LODOP=getLodop() let listCount=LODOP.GET_PRINTER_COUNT() //当前打印设备数量 let list=[] for( let i=0;i..
Lodop打印控件在平台中的应用
快速开发平台
06-29 1401
一.什么是lodoplodop取意自“load or print”，是一款优秀的Web打印控件。在B/S系统中，传统打印控件总是“页面看到什么才能打印什么”，缺乏灵活性，使打印略显呆板。而使用lodop则可以做到“只看想看的、打印想打的”，不仅开发人员可以自由设置打印输出内容，用户还可对打印内容进行一系列调整。lodop控件目前有简体中文、繁体中文、大五码(big5)和英文几个版本。适
Web打印--Lodop使用手册install_lodop.exe
热门推荐
LYBWWP
07-13 3万+
http://www.hbsszx.com/lodop/PrintSample27.html Lodop是一款专业的WEB打印控件，其设计目标是简单易用、功能足够强大，开创WEB打印开发的新局面。 Lodop设计者对WEB下的打印开发任务进行了分类汇总，高度抽象，设计出仅用几个功能函数，就可实现复杂的打印任务，尽量减少使用者的知识累赘。控件发布包有3个系统文件组成，全部功能用几个控件参数和2组
LODOP打印控件及案例
08-22
LODOP打印控件及案例，整理的免费版
Lodop打印控件
05-07
Lodop打印控件 实现跨平台的各种浏览器 实现LODOP的各种表单套打
LODOP打印控件
09-30
最新版本Lodop打印控件，可用于单页打印，多页连续打印。可设置符合产品需求的打印样式和设计
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 364
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 150
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 114
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 251
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
uniapp中使用lodop打印控件实现app广域、局域网打印功能-库文件
06-07
uniapp是一款开发跨平台应用的框架，支持多种主流移动端和web端平台。在uniapp中使用lodop打印控件可以实现app的广域、局域网打印功能，但需要引入相关的库文件。 lodop是一款打印控件，具有较高的兼容性和易用性。使用lodop可以轻松实现各种打印功能，包括二维码、标签、票据等样式定制和打印输出。 在uniapp中使用lodop需要在项目中引入lodop打印控件的相关库文件，然后在代码中编写打印逻辑。lodop提供了丰富的API接口，可以根据具体需求进行打印样式配置和打印数据传递。 实现广域、局域网打印功能需要注意局网环境和安全性问题，可以通过设置网络打印机或者局网打印机等方式实现打印机共享，然后在应用中通过lodop进行打印。 总之，在uniapp中使用lodop打印控件可以方便快捷地实现app的打印功能，具有广泛的应用前景。需要注意的是，应根据实际需求选择合适的打印方案，并注意安全问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值