Web开发-Lodop打印控件实践

Web开发，我们常常会用到打印的功能。

Lodop是Web开发常用的打印组件，方便快捷！！

废话少说，直接上效果图。

lodop在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来，支持通过CSS来调整布局。

打印Table表格数据，使用LODOP.ADD_PRINT_TABLE()方法。

- 当打印分页时，每一页都有表头。

样例JS代码如下（几十行代码即可实现打印功能）：

function print() {var headHtml = document.getElementsByTagName("head")[0].innerHTML;var printHtml = $("#print").html();var html = '<head>' + headHtml + '</head><body>' + printHtml + '</body>';LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Width:90%");// 表头LODOP.ADD_PRINT_TEXT('2mm', '50%', 300, 100, "XXXXX打印标题");LODOP.SET_PRINT_STYLEA(0, "FontName", "微软雅黑");LODOP.SET_PRINT_STYLEA(1, "FontSize", 15);// 文本框里 内容对于文本框居中LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);// 打印项在纸张中水平居中LODOP.SET_PRINT_STYLEA(0, "Horient", 2);LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);LODOP.ADD_PRINT_TEXT('8mm', '50%', 300, 100, "XXXX副标题");LODOP.SET_PRINT_STYLEA(0, "FontName", "微软雅黑");LODOP.SET_PRINT_STYLEA(2, "FontSize", 12);// 文本框里 内容对于文本框居中LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);// 打印项在纸张中水平居中LODOP.SET_PRINT_STYLEA(0, "Horient", 2);LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);LODOP.ADD_PRINT_TABLE('16mm', '0mm', 'RightMargin:0mm', "BottomMargin:10mm", html);LODOP.ADD_PRINT_HTM('98%', '3%', 300, 120, "<font style='font-size:12px' format='0'><span>制表日期:2020-11-19</span></font>");LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);LODOP.ADD_PRINT_HTM('98%', '88%', 300, 100, "<font style='font-size:12px' format='0'><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>");LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);// 设置打印比例LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%");LODOP.PREVIEW();
}

lodop在下载资源提供了JS-API技术文档，具体可自行下载查看！这个对提高开发效率非常有帮助！！

Web开发-Lodop打印控件实践相关推荐

关于Lodop打印控件
Vue项目中开发Lodop打印控件操作笔记. 1.进入官网下载控件,然后安装. 1 http://www.lodop.net/ 2.安装包里面有LodopFuncs.js,推荐使用官方js,网上也有很 ...
Web打印 Lodop打印控件 bootstrap框架
贴图知乎:显著提升程序员身心健康和工作效率的装备有哪些? 笔记本: 1.银河舰队 PAVILION 15-bc011TX光暗影精灵2 2.顽石 -FL5900U7500超薄i7(性价比最高) ...
lodop打印控件的使用
web打印解决方案 1.生成打印模版(网页),使用window.print()预览打印模版,在浏览器中打印 2.导出网页为excel文件,详见网页导出为excel 3.使用lodop打印控件第一种方 ...
Lodop打印控件在平台中的应用
一.什么是lodop lodop取意自"load or print",是一款优秀的Web打印控件. 在B/S系统中,传统打印控件总是"页面看到什么才能打印什么" ...
lodop打印html内容,Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...
Lodop打印控件指定打印任务某几页
使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...
Lodop打印控件初始化过程
Lodop需要在计算机上下载一个控件C-Lodop 引用C-Lodop很简单,在页面head中添加如下路径的js文件,就可用固定变量名LODOP或CLODOP发打印请求了: <script s ...
快递单批量打印之LODOP打印控件
Lodop打印控件批量打印的方式: 1.批量打印每页内容相同的: (1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份. 2.批量打印每页不同内容的: (1)通过在一个任务中分页,循 ...
uniapp中使用lodop打印控件实现app广域、局域网打印功能，亲测可用
文章目录前言一.本文目的二.使用步骤 1.准备工作 2.引入库文件 3.页面使用总结前言在项目中使用了lodop控件,然而蛋疼的发现这玩意uniapp app端不能直接使用,在vip售后群 ...

Web开发-Lodop打印控件实践

Web开发-Lodop打印控件实践相关推荐

最新文章

热门文章