当前位置：首页 > article >正文

网页打印很简单！用web打印插件lodop轻松实现文件打印

article 2026/3/12 12:38:33

最近，给客户发一个事件提醒软件，其中客户要求实现打印功能，因为是用asp.net mvc 开发首先考虑到用水晶报表来实现（crystalReport），以前开发c# winform程序，感觉水晶报表还是蛮好的，但自从使用asp.net mvc 开发，感觉不是很友好,无意中看到有一个支持web（网页打印）的打印插件lodop，打开官网，发现该软件比较正规，网上评价也是比较好，抱着试试看的态度，去官方网站：Lodop和C-Lodop官网主站，下载并安装。根据官方文档，并结合自己的经验，特分享如下：

网页效果如图：

实现的打印效果图示如下：

很是干净和整洁。非常漂亮！

登录官网（Lodop和C-Lodop官网主站），下载相关安装文件：

安装包如下，根据图示安装：

本人在c# asp.net mvc 下测试，读者可以根据自己熟悉的语言对号入座。分享代码如下：

1.当然首先在vs2022中的工程项目界面要引入，LodopFuncs.js

2.部分代码如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script language="javascript" src="LodopFuncs.js"></script>
</head>
<body><form id="form1"><table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border: solid 1px black; border-collapse: collapse"><tr><td width="133" id="mtb001"><font face="黑体" color="#FF0000" size="3"><u>&nbsp;《表单一》&nbsp;</u></font></td></tr></table><table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF" style="border-collapse: collapse; table-layout: fixed; border: solid 1px black;"><tr><td width="66" height="16" style="border: solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td><td width="51" height="16" style="border: solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td><td width="51" height="16" style="border: solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr><tr><td width="66" height="16" style="border: solid 1px black">A<sub>01</sub></td><td width="80" height="12" style="border: solid 1px black">中-001</td><td width="51" height="12" style="border: solid 1px black">C1<sup>x</sup></td></tr><tr><td width="66" height="16" style="border: solid 1px black">A<sub>02</sub>Φ</td><td width="80" height="16" style="border: solid 1px black">日-スの</td><td width="51" height="16" style="border: solid 1px black"><font face='Vernada'>7&#13221</font></td></tr><tr><td width="66" height="16" style="border: solid 1px black; overflow: hidden">A<sub>03</sub><nobr>over隐藏后面的：1234567890</nobr></td><td width="80" height="16" style="border: solid 1px black; overflow: hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup></td></tr></table></form>若只打印《表单一》,看一下<a href="javascript:prn1_preview()">打印预览</a>,可<a href="javascript:prn1_print()">直接打印</a>也可 <script language="javascript" type="text/javascript">   var LODOP; //声明为全局变量 function prn1_preview() {CreateOneFormPage();LODOP.PREVIEW();};function prn1_print() {CreateOneFormPage();LODOP.PRINT();};function prn1_printA() {CreateOneFormPage();LODOP.PRINTA();};function CreateOneFormPage() {LODOP = getLodop();LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");LODOP.SET_PRINT_STYLE("FontSize", 18);LODOP.SET_PRINT_STYLE("Bold", 1);LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");LODOP.ADD_PRINT_HTM(88, 200, 350, 600, document.getElementById("form1").innerHTML);};function prn2_preview() {CreateTwoFormPage();LODOP.PREVIEW();};function prn2_manage() {CreateTwoFormPage();LODOP.PRINT_SETUP();};function CreateTwoFormPage() {LODOP = getLodop();LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单二");LODOP.ADD_PRINT_RECT(70, 27, 634, 242, 0, 1);LODOP.ADD_PRINT_TEXT(29, 236, 279, 38, "页面内容改变布局打印");LODOP.SET_PRINT_STYLEA(2, "FontSize", 18);LODOP.SET_PRINT_STYLEA(2, "Bold", 1);LODOP.ADD_PRINT_HTM(88, 40, 321, 185, document.getElementById("form1").innerHTML);LODOP.ADD_PRINT_HTM(87, 355, 285, 187, document.getElementById("form2").innerHTML);LODOP.ADD_PRINT_TEXT(319, 58, 500, 30, "注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整");};function prn3_preview() {LODOP = getLodop();LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_全页");LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", document.documentElement.innerHTML);LODOP.PREVIEW();};</script>
</body>
</html>

3.考虑到部分读者可能看不懂，补充完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP的样例二:打印当前页面的内容</title>
<meta name="keywords" content="Lodop、Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印">
<meta name="description" content="Lodop、Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印">
<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<iframe src="https://help.lodop.net:8143/k_hlp?type=url&fid=DA" width="500" height="46" frameborder="0" scrolling="no" style="float:right;background:inherit;"></iframe>
<h2><font color="#009999">演示如何打印当前页面的内容：</font>
</h2>
<form id="form1"><table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001"><font face="黑体" color="#FF0000" size="3"><u>&nbsp;《表单一》&nbsp;</u></font></td></tr></table><table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;"><tr><td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr> 
<tr>
<td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td>
<td width="80" height="12" style="border:solid 1px black">中-001</td>
<td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td>
</tr> 
<tr>
<td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td>
<td width="80" height="16" style="border:solid 1px black">日-スの</td>
<td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7&#13221</font></td>
</tr> <tr><td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub><nobr>over隐藏后面的：1234567890</nobr>
</td><td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup>
</td></tr> </table>
</form>
<br>
<div id="form2"><table border="1" width="100%" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001"><font face="黑体" color="#FF0000" size="3">《表单二》&copy;</font></td></tr></table><table border="1" width="100%" height="106" cellspacing="0" bgcolor="#CCFFFF" style="border:solid 1px black;border-collapse:collapse"><tr><td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">X</font><font color="#0000FF">等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Y等</font></td>
<td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Z等</font></td></tr> <tr><td width="66" height="12" style="border:solid 1px black"><span style="font-family:Wingdings;font-size:25px;" >&#254;</span>X001</td>
<td width="51" height="12" style="border:solid 1px black"><strike>Y001</strike></td>
<td width="51" height="44" rowspan="3"  style="border:solid 1px black"><ol style="list-style-type:upper-alpha;list-style-position:inside;"><li>Z001</li><li>Z002</li><li>Z003</li><li>Z004</li><li>Z005</li></ol></td></tr> 
<tr><td width="30%" height="16" style="border:solid 1px black"><strong>X002</strong></td>
<td width="51" height="16"  style="border:solid 1px black"><u>Y002</u><span style="visibility: hidden">hidesome</span></td></tr> <tr><td width="30%" height="16" style="border:solid 1px black"><span style="text-decoration: overline">X003</span>
</td><td width="40%" height="16" style="border:solid 1px black"><em>Y003</em><input type="radio" name="R1"><input type="radio" name="R1" checked></td></tr> </table>
</div>
<p>1：若只打印《表单一》,看一下<a href="javascript:prn1_preview()">打印预览</a>,可<a href="javascript:prn1_print()">直接打印</a>也可      
<a href="javascript:prn1_printA()">选择打印机</a>打印。<br><br>
2：若《表单一》和《表单二》一起并列输出,看一下<a href="javascript:prn2_preview()">打印预览</a>,其布局风格可<a href="javascript:prn2_manage()">打印维护</a>调整。
<p>3：若打印整个页面,看看<a href="javascript:prn3_preview()">打印预览</a>。<br><br>
本例要点是用Document的innerHTML方法把打印目标的超文本送给控件。  
<p><a href="../LodopDemo.html">&lt;&lt;回样例目录</a>
</p>   
<script language="javascript" type="text/javascript">   var LODOP; //声明为全局变量 function prn1_preview() {	CreateOneFormPage();	LODOP.PREVIEW();	};function prn1_print() {		CreateOneFormPage();LODOP.PRINT();	};function prn1_printA() {		CreateOneFormPage();LODOP.PRINTA(); 	};	function CreateOneFormPage(){LODOP=getLodop();  LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");LODOP.SET_PRINT_STYLE("FontSize",18);LODOP.SET_PRINT_STYLE("Bold",1);LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("form1").innerHTML);};	                     function prn2_preview() {	CreateTwoFormPage();	LODOP.PREVIEW();	};function prn2_manage() {	CreateTwoFormPage();LODOP.PRINT_SETUP();	};	function CreateTwoFormPage(){LODOP=getLodop();  LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单二");LODOP.ADD_PRINT_RECT(70,27,634,242,0,1);LODOP.ADD_PRINT_TEXT(29,236,279,38,"页面内容改变布局打印");LODOP.SET_PRINT_STYLEA(2,"FontSize",18);LODOP.SET_PRINT_STYLEA(2,"Bold",1);LODOP.ADD_PRINT_HTM(88,40,321,185,document.getElementById("form1").innerHTML);LODOP.ADD_PRINT_HTM(87,355,285,187,document.getElementById("form2").innerHTML);LODOP.ADD_PRINT_TEXT(319,58,500,30,"注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整");};              function prn3_preview(){LODOP=getLodop();  LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_全页");LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.documentElement.innerHTML);LODOP.PREVIEW();	};	
</script> </body>
</html>

如果错误，请斧正！谢谢！

网页打印很简单！用web打印插件lodop轻松实现文件打印

相关文章：

网页打印很简单！用web打印插件lodop轻松实现文件打印

北京迅为iTOP-RK3568开发板OpenHarmony系统南向驱动开发实操-HDF驱动配置LED

C语言函数全解析 | 零基础入门指南

驻场运维服务方案书（Word文件）

【时时三省】(C语言基础)用printf函数输出数据2

django框架 [面试篇]

吴恩达机器学习笔记复盘（三）Jupyter NoteBook

【Docker项目实战】使用Docker部署serverMmon青蛇探针（详细教程）

信息学奥赛一本通 1449：【例题2】魔板

Linly-Talker：开源数字人框架的技术解析与影响

你的完美主义：从缺陷到超能力

Java 8 + Tomcat 9.0.102 的稳定环境搭建方案，适用于生产环境

Java基础关键_021_集合（五）

mcp 是一种什么协议，怎么构建mcpserver,怎么实现多智能体的调用

Nginx的流式响应配置详解

windows10 清理 C 盘

浅谈Linux中的Shell及其原理

ARM内部寄存器与常用汇编指令（ARM汇编）

【QT5 Widgets示例】Model/View编程初探

一键优化右键菜单，高效又清爽！

排查数据库的正在执行的占用的慢sql语句，可以查看生产的执行sql语句时间

Java泛型程序设计使用方法

成绩排序（结构体排序）

【redis】lua脚本

Oracle中的INHERIT PRIVILEGES权限

Kafka相关的面试题

OpenHarmony-XTS测试

【物联网-WIFI】

作业9 （2023-05-05 数组的定义和初始化）

C语言中的流程控制语句