项目中有很多打印功能，一开始使用浏览器自带的打印功能，发现在不同的浏览打印效果上有着较大的差异，最终选择了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-varsJS1.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-undefLODOP = 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-undefdocument.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;return;} else {// eslint-disable-next-line no-undefif (CLODOP.CVERSION < "4.1.2.3") {// eslint-disable-next-line no-undefdocument.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;elseLODOP = 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");elseLODOP.setAttribute("type", "application/x-print-lodop");document.documentElement.appendChild(LODOP);CreatedOKLodopObject = LODOP} elseLODOP = CreatedOKLodopObject;//Lodop插件未安装时提示下载地址if ((!LODOP) || (!LODOP.VERSION)) {if (ua.indexOf('Chrome') >= 0)// eslint-disable-next-line no-undefdocument.body.innerHTML = strHtmChrome + document.body.innerHTML;if (ua.indexOf('Firefox') >= 0)// eslint-disable-next-line no-undefdocument.body.innerHTML = strHtmFireFox + document.body.innerHTML;// eslint-disable-next-line no-undefdocument.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-undefdocument.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() + printHtml);// 固定位置输出页码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();},// 可自定义打印样式setPrintStyle() {let cssHtml= '<style>'+ '* {'+ 'margin: 0;padding: 0;outline: none;list-style: none;text-decoration: none;'+ '}'+ 'table {text-align:center;border-collapse:collapse;border:0;font-size:16px!important;font-family:\'仿宋\' !important;border: 1px solid black;}'+ 'table thead,table tfoot{height:0px}'+ 'table thead tr, table tfoot tr{height:0px}'+ 'table tr,th,td{border: 1px solid black;}'+ '.head {font-size: 24;text-align: center; padding-bottom: 5px;font-family: \'黑体\' !important;}'+ 'caption {padding-bottom:5px;}'+ '.main {width: 100%}'+ '</style>';return cssHtml;},

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

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

Lodop打印控件指定打印任务某几页
使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...
java web 打印控件_web打印，web打印控件，dotnet web打印控件，java web打印控件，webprint...
webprint打印参数设置小插件,主要实现打印纸张,边距,打印机等的设置. 主要功能: 设置页眉页脚属性设置打印页面左右上下边距设置打印方向,打印份数,打印指定页打印模版和指定纸型绑定设置自 ...
C# ie通过打印控件点打印，总是弹出另存为xps的对话框
用的是lodop打印控件,点打印后,总是弹出另存为xps的对话框,后来在网上查到可能是把windows自带的Microsoft XPS Document Writer设为默认打印机的原因. 但现在没有 ...
发现了一个好用的WEB项目打印控件--四方打印
PAZU 与WEB打印 PAZU 组件应用于基于WEB的开发 PAZU 提供以下三大类功能: 1.控制IE窗口的外观和行为 1.1 通过 JavaScript 隐藏IE的地 ...
票据打印控件票据打印控件
快递单批量打印之LODOP打印控件
Lodop打印控件批量打印的方式: 1.批量打印每页内容相同的: (1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份. 2.批量打印每页不同内容的: (1)通过在一个任务中分页,循 ...
(转)WEB第三方打印控件[ASP.NET常用工具]
本文转载自:http://blog.csdn.net/chz_cslg/article/details/25415347 在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD ...
WEB免费打印控件推荐
在WEB系统中,打印的确是个烦人的问题. 要么自己开发打印控件,如果项目时间紧,肯定来不及. 要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1.2W之间,这就麻烦了. 前段时间有机 ...
打印控件---引用网友推荐
原文出处:http://www.cnblogs.com/panshenglu/archive/2009/09/21/1571258.html 原文作者:六六在WEB系统中,打印的确是个烦人的问题. ...

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

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

1. LODOP的优势：

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

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

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

最新文章

热门文章