Web开发-Lodop打印控件实践

青旅半醒 2022-12-24 09:54 454阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

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, "制表日期:2020-11-19");
 LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
 LODOP.ADD_PRINT_HTM('98%', '88%', 300, 100, "第##页/共##页");
 LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
 
 // 设置打印比例
 LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "100%");
 LODOP.PREVIEW();
 }

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