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

news2025/3/15 14:02:08

最近，给客户发一个事件提醒软件，其中客户要求实现打印功能，因为是用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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2315483.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
驻场运维服务方案书（Word文件）

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

目 录 第一章 背景分析 1.1. 项目背景 1.2. 项目目标 1.3. 系统现状 1.3.1. 网络系统 1.3.2. 设备清单梳理 1.3.3. 应用系统 第二章 需求分析及理解 2.1. 在重要日期能保障信息系统安全 2.2. 信息系统可长期安全、持续、稳定的运行 2.3. 提升发现安全问题、解决安全…
阅读更多...
【时时三省】(C语言基础)用printf函数输出数据2

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

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 格式字符 在输出时&#xff0c;对不同类型的数据要指定不同的格式声明&#xff0c;而格式声明中最重要的内容是格式字符。常用的有以下几种格式字符。 ( 1 ) d格式符。用来输出一个有符号的…
阅读更多...
django框架 [面试篇]

django框架 [面试篇]

Django 是一个基于 Python 的web框架&#xff0c;遵循"快速开发&#xff0c;不重复造轮子(dont repeat yourself)"的原则&#xff0c;帮助用户构建web应用。 而 Django 它本身提供了一些全栈式的一些组件&#xff0c;包括了 ORM&#xff0c;模板引擎&#xff0c;表单…
阅读更多...
信息学奥赛一本通 1449：【例题2】魔板

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

题目 1449&#xff1a;【例题2】魔板 分析 首先注意&#xff1a;输入是按顺时针给出的&#xff0c;但我们处理时需要按正常顺序排&#xff0c;可以用以下代码读入 string s(8, 0); // 初始化全零字符串 cin>>s[0]>>s[1]>>s[2]>>s[3]; cin>>…
阅读更多...
你的完美主义：从缺陷到超能力

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

所属专栏&#xff1a;《逻辑辨证系列》 前情回顾&#xff1a; 《完美还是完成》&#xff08;一&#xff09;&#xff1a;完成还是完美—完成大于完美 时间、机会、情绪成本 先完成 … 本期&#xff1a; 《完美还是完成》&#xff08;二&#xff09;&#xff1a;你的完美主…
阅读更多...
浅谈Linux中的Shell及其原理

浅谈Linux中的Shell及其原理

浅谈Linux中的Shell及其原理 Linux中Shell的运行原理github地址前言一、Linux内核与Shell的关系1.1 操作系统核心1.2 用户与内核的隔离 二、Shell的演进与核心机制2.1 发展历程2.2 核心功能解析2.3 shell的工作流程1. 用户输入命令2. 解析器拆分指令3. 扩展器处理动态内容变量替…
阅读更多...
ARM内部寄存器与常用汇编指令（ARM汇编）

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

1 地址空间&RISC与CISC CISC&#xff1a;复杂指令集计算机 RISC&#xff1a;精简指令集计算机 RISC 与 CISC 的比较 2 ARM内部寄存器 3 ARM汇编概述 RISC精简指令可以大致分为几类&#xff1a; 1.内存读写 2.运算 3.跳转/分支 4.比较 而指令的集合就称之为“指令集”…
阅读更多...
【QT5 Widgets示例】Model/View编程初探

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

文章目录 Model/ViewModel/View编程的优点常见Model类和View类Model/View应用程序示例只读的表格修改文本外观显示变化的数据设置表格标头可编辑视图示例树结构视图示例获取视图选中项 Model/View Model/View编程的优点 Model/View编程介绍&#xff1a;https://doc.qt.io/qt-…
阅读更多...
一键优化右键菜单，高效又清爽！

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

打工人们你们好&#xff01;这里是摸鱼 特供版~ 电脑右键菜单杂乱无章&#xff0c;常用功能被淹没&#xff1f;图标显示异常、打印出错让人手足无措&#xff1f;别担心&#xff0c;Easy Context Menu来帮你&#xff01;这是一款右键菜单管理工具&#xff0c;能快速清理不必要的…
阅读更多...
成绩排序（结构体排序）

成绩排序（结构体排序）

成绩排序 #include<stdio.h> #include<stdlib.h> struct student{char name[50];int score;int order; }; int flag; int cmp(const void *a,const void *b){struct student *s1(struct student*)a;struct student *s2(struct student*)b;if(s1->scores2->…
阅读更多...
OpenHarmony-XTS测试

OpenHarmony-XTS测试

OpenHarmony-XTS测试 OpenHarmony-XTS测试环境搭建测试准备开始运行PS OpenHarmony-XTS测试 针对OpenHarmony版本进行XTS测试使用记录。 windows环境。 以acts套件为例。 环境搭建 获取测试套件&#xff0c;两种方法 1&#xff09;官网下载&#xff1a;https://www.openharm…
阅读更多...
【物联网-WIFI】

【物联网-WIFI】

物联网-WIFI ■ ESP32-C3-模块简介■ ESP32-C3-■ ESP32-C3-■ WIFI-模组■ WIFI-■ WIFI- ■ ESP32-C3-模块简介 ■ ESP32-C3- ■ ESP32-C3- ■ WIFI-模组 ■ WIFI- ■ WIFI-
阅读更多...
linux常用基本指令汇总

linux常用基本指令汇总

文章目录 01. ls指令02. pwd指令03. cd指令04. touch指令05. mkdir指令06. rmdir指令07. rm指令08. man指令09. cp指令10. mv指令11. cat指令11. more指令12. less指令13. head指令14. tail指令15. time指令16. cal指令17. find指令18. grep指令19. zip/unzip指令20.tar指令21.…
阅读更多...
Docker Desktop 安装与使用详解

Docker Desktop 安装与使用详解

目录 1. 前言2. Docker Desktop 安装2.1 下载及安装2.2 登录 Docker 账号2.3 进入 Docker Desktop 主界面 3. Docker 版本查看与环境检查3.1 查看 Docker Desktop 支持的 Docker 和 Kubernetes 版本3.2 检查 Docker 版本 4. Docker Hub 和常用镜像管理方式4.1 使用 Docker Hub4…
阅读更多...
【HarmonyOS Next】鸿蒙应用常规面试题和答辩思路参考

【HarmonyOS Next】鸿蒙应用常规面试题和答辩思路参考

【HarmonyOS Next】鸿蒙应用常规面试题和答辩思路参考 一、充分了解岗位JD要求 根据招聘发布的岗位JD&#xff0c;进行自我匹配分析。了解基本要求和加分项&#xff0c;以及项目节奏和英文要求等。 技术不匹配的点&#xff0c;是否会影响应聘岗位加分项自己是否掌握&#xf…
阅读更多...
《计算机图形学》第二课笔记-----二维变换的推导

《计算机图形学》第二课笔记-----二维变换的推导

前言&#xff1a;为什么这么突兀的把这一节内容放在了第二课&#xff0c;第一是因为我急于求成&#xff0c;第二是因为这一章节太重要了&#xff0c;这几乎是二维三维变换的最核心的东西&#xff0c;理解了这一章节内容&#xff0c;后面的就会像打通了任督二脉一样&#xff0c;…
阅读更多...
机器学习（七）

机器学习（七）

一&#xff0c;监督学习和无监督学习聚类的数据集比较&#xff1a; 监督学习&#xff1a; 数据集包括输入的数据和与之对应的标签 无监督学习&#xff1a; 数据集仅含有输入的数据&#xff0c;要求算法自己通过所给的数据集来确定决策边界 二&#xff0c;聚类(Clustering): 聚…
阅读更多...
利用labelimg实现yolov8数据集的制作

利用labelimg实现yolov8数据集的制作

我们在使用yolov8进行物体检测识别的时候&#xff0c;由于其内置的n,s,m等模型只包含90多种物体&#xff08;很多其他物品并未包含在其中&#xff09;&#xff0c;导致我们无法直接使用其模型进行视频或者图片的检测识别。这个时候&#xff0c;我们就需要自己制作数据集进行训练…
阅读更多...
【0x80070666】-已安装另一个版本...（Tableau 安装失败)

【0x80070666】-已安装另一个版本...（Tableau 安装失败)

第一种是之前安装过tableau相关软件&#xff0c;但是没卸载干净。 方法1&#xff1a;卸载旧版本 打开 控制面板 → 程序和功能&#xff08;或 添加/删除程序&#xff09;。查找 Tableau Desktop&#xff0c;如果已安装旧版本&#xff0c;卸载它。重新启动电脑后再尝试安装。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023