工具系列 | WEB打印程序开发

Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现 复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句。

WEB套打可选方案不多，理想的更少，利用免费控件Lodop+JavaScript实现精确套打，算是较为经典的选择。这种方案其实比较简单，利用一个htm文件就可以实现模板设计过程，几乎是“空手套”式的开发，但理解这几个步骤还是需要点时间，下面一步步详细演示说明：

第一步：建立一个空白的模板设计文件

把以下超文本代码复制到一个本地htm文件中:

本文模拟EMS特快专递单的程序开发，文件起名为printEMS.htm，权且称它为模板设计文件。

第二步：用浏览器打开该文件

　　在本地文件夹中双击该文件就可以打开，但在进入设计之前，你的机器需要安装Lodop，如果还没安装过，请在如下地址下载安装文件(找那个install_lodop32.exe文件，Lodop是一个1M左右的小文件)：

http://www.mtsoftware.cn/download.html或http://www.c-lodop.com/download.html

第三步：准备设计

成功安装Lodop之后再次打开模板设计文件printEMS.htm，点击其中“模板设计”链接，就弹出如下空白的打印设计窗口：

为了尽快定位模板中的数据位置，你需要做一张票据扫描图作为背景，当然没有扫描图也能完成，只是需要多摸索几次，费点时间而已。下面是我做的EMS扫描图，你把该图另存成一个jpg文件，以便我们一起完成后面的演示步骤。

第四步：装载背景图并调整图片大小

在打印设计窗口，点下图所示的“装载背景图...”菜单，调入以上保存的EMS图片文件。

装载背景图后，点上图所示的“调整背景图...”菜单，弹出下图“背景图调整”窗口，设定其中的图片宽度为209mm,高度113mm会自动变化。这个宽度值是我测量实际票据得来的。如果扫描图是按1:1比例获得的，那么调整背景图这一步就免了，当然要做点这点很难，所以最好还是在这里直接设置具体尺寸反倒简单。

第五步：添加数据内容，开始打印测试

点下图所示“插入文本项”菜单，添加打印内容，内容项可以拖拉或精细调整，基本对准之后，点击“预览”按钮（注意旁边的“打印”按钮是收费功能，纸上会有水印，而“预览时的打印”按钮是完全免费的，我们用后者）。把内容打印到薄一点的白纸上，然后在阳光下与真实票据透亮对比，以最左最上的某个内容为基准，其它内容远近调整，如此反复测试直到所有内容相互位置都对准。这一步先做到内容之间的相互位置对准，等下一步处理整体位置。

第六步：整体对准

由于打印机左边距或上边距不一定是零或票据边缘有误差，所以尽管第五步打印出来的内容相互之间位置是准确的，但打印到真实票据上仍会整体偏离一些，需要进行整体位置调整。点击下图红圈所示的“纸钉”按钮，“纸钉”弹起后，整个设计版面就可以上下左右调整了，然后按上一步的办法打印测试，直到整体对准成功。为了避免浪费票据，打印时仍可用薄白纸测试，注意此时透光对照时，纸张的左边沿和上边沿要与票据对齐，通过观察内容的位置来判断是否整体对准。

第七步：生成打印模板的程序代码

套打测试成功后，点击第五步图中所示的“生成程序代码”菜单，出现下图结果，这些代码就是我们需要的模板程序代码，把他们复制出来，准备融合到你的页面程序中使用。

第八步：完成打印模板设计文件

想不想知道WEB套打有啥感觉？好，我们先做一个静态WEB页面爽一下：把第七步生成的程序代码，插入替换第一步的空白设计文件CreatePrintPage函数内，变成如下内容:

把以上内容复制到另外一个htm文件printEMS_OK.htm中，双击打开它，点其中的打印预览，就可以实现简单的WEB套打了。以上八步基本完成了模板设计，并实现静态页面套打，但要把模板代码融合到实际的WEB程序中，还需要做些工作。

第九步：模板程序代码的使用

把以上CreatePrintPage函数进行简单改造，原函数如下：

function CreatePrintPage() {
   LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
   LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
   LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人单位名称");
   LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的详细地址");
   LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
   LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人单位名称");
   LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人详细地址");
   LODOP.ADD_PRINT_TEXT(289,47,178,22,"内件品名");
   LODOP.ADD_PRINT_TEXT(290,258,100,20,"内件数量");
   LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人电话");
   LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人电话");
};

把其中的打印内容提出来做为变量参数，函数改成如下样式：

function CreatePrintPage(strPName,strJJRXM,strJJRDW,strJJRDZ,strSJRXM,strSJRDW,strSJRDZ,strNJPM,strNJSL,strJJRDH,strSJRDH) {
   LODOP.PRINT_INITA(14,11,800,600,strPName);       //打印任务名
   LODOP.ADD_PRINT_TEXT(95,95,75,20,strJJRXM);      //寄件人姓名
   LODOP.ADD_PRINT_TEXT(123,148,194,20,strJJRDW);   //寄件人单位名称
   LODOP.ADD_PRINT_TEXT(158,101,238,35,strJJRDZ);   //寄件人的详细地址
   LODOP.ADD_PRINT_TEXT(92,446,75,20,strSJRXM);     //收件人姓名
   LODOP.ADD_PRINT_TEXT(122,496,208,20,strSJRDW);   //收件人单位名称
   LODOP.ADD_PRINT_TEXT(160,460,244,35,strSJRDZ);   //收件人详细地址
   LODOP.ADD_PRINT_TEXT(289,47,178,22,strNJPM);     //内件品名
   LODOP.ADD_PRINT_TEXT(290,258,100,20,strNJSL);    //内件数量
   LODOP.ADD_PRINT_TEXT(92,245,100,20,strJJRDH);    //寄件人电话
   LODOP.ADD_PRINT_TEXT(90,608,75,20,strSJRDH);     //收件人电话
};

这个改造后的JS函数还是很好理解的，无论写入js文件还是直接嵌在页面内都简单易用。如果你改变了内容的字体、大小、粗斜体等格式，代码还会多一些，但总体来说比较简洁。

第十步：设置纸张高度，实现连续套打

多数套打业务的票据是连续纸，需要精确地分页，从而保证连续多页打印不偏移，为此以上代码还要在PRINT_INITA之后加一行SET_PRINT_PAGESIZE语句：

function CreatePrintPage() {
   LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
   LODOP.SET_PRINT_PAGESIZE(1,"209mm","113mm","");//设置纸张高度
   LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
   LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人单位名称");
   LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的详细地址");
   LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
   LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人单位名称");
   LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人详细地址");
   LODOP.ADD_PRINT_TEXT(289,47,178,22,"内件品名");
   LODOP.ADD_PRINT_TEXT(290,258,100,20,"内件数量");
   LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人电话");
   LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人电话");
};

其中209mm这个纸宽参数意义不大，主要是113mm这个高度参数，它决定了每页的走纸距离，对连续打印影响很大。这个值是我测量实际票据高度得来的，包含纸张之间的撕孔间隙。理想的测量方式，是若干页连起来一起测量取其平均高。

加入纸高控制后的打印预览如下，你可以连续打印两页内容到同一张长一点的白纸上，测试对照一下看看。把以上加入SET_PRINT_PAGESIZE语句的代码复制进第三个htm文件printEMS_OKM.htm试试。假如从第二页开始，内容向下偏移，说明纸张高度设置比实际票据大，就减小113mm这个参数值，否则增大它，这个参数可以精确到0.1mm。

第十一步：让操作者自己调整位置

　　以上十步实现的套打可以很精确，但都是以当前打印机为前提。如果你的打印程序要面对许多种类型的打印机，甚至一些未知的打印机类型，那么“打印维护”功能会很有用处。你可以根据情况在程序中把该功能授权给最终操作者或现场技术维护人员，让使用者自己来调整打印位置，以适应各种类型的打印机。

　　打印维护的指令语句是PRINT_SETUP，进入包含该功能的在线文件PrintEMS_OKMSetup.htm,先在打印维护中调整一下打印内容或整体位置，点“应用”按钮。关闭浏览器后重新打开，进入“打印预览”，看看是否有关联变化。下图是打印维护界面，其中能看到“应用”按钮和“恢复整体缺省”按钮的位置。

证书打印

说明：记得安装插件哇！地址：http://www.lodop.net/download.html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印证书</title>
</head>
<body>
打印证书
<script language="javascript" src="/assets/common/js/LodopFuncs.js"></script>
<input type="button" value="自我打印002" onClick="my_print2()">

<script>
    var LODOP; //声明为全局变量
    /**
     * 自我打印002
     * @constructor
     */
    function my_print2()
    {
        var s = CreatePrintPage("Tinywan", 2019, 5, 21, 2019, 5, 31, ‘北京市‘, ‘城关‘, ‘人民大会堂3层‘,
            ‘第八届新思想培训‘, ‘ZS2019050008253923‘, 340822200008288888, 2019, 10, 1)
    }

    /**
     * 打印模板
     * @constructor
     */
    function CreatePrintPage($name, $start_y, $start_m, $start_d, $end_y, $end_m, $end_d,
                             $city, $county, $train_name, $address, $cert_no, $id_no, $c_y, $c_m, $c_d) {
        LODOP = getLodop();
        LODOP.PRINT_INITA(-2, -3, 958, 648, "套打证书模板");
        LODOP.ADD_PRINT_TEXT(210, 180, 80, 30, $name);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 290, 54, 30, $start_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 380, 36, 30, $start_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 435, 35, 30, $start_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 522, 55, 30, $end_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 615, 36, 30, $end_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 670, 35, 29, $end_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(265, 120, 71, 28, $city);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 215, 60, 30, $county);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 440, 150, 30, $train_name);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 660, 150, 30, $address);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(370, 440, 200, 30, $cert_no);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(410, 440, 200, 30, $id_no);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(520, 500, 51, 30, $c_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(520, 595, 33, 28, $c_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(520, 670, 31, 28, $c_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_SETUP_BKIMG("<img border=‘0‘ src=‘/assets/common/img/train_tpl8.png‘>");
        LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", 1);
        LODOP.PREVIEW();
    }
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/tinywan/p/11508174.html

时间： 2024-08-12 18:53:09

工具系列 | WEB打印程序开发的相关文章

第一章 Web应用程序开发基础

一.HTTP协议工作机制 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它是一种主流B/S架构中应用的通信协议.具有以下特点:1.无状态 服务端不会记录客户端每次提交的请求,服务器一旦相应客户端之后,就会结束本次的通信过程.客户端下一次的请求是一个新的 连接,和上一次通信没有任何关系.2.简单灵活 HTTP是基于请求(request)和响应(response)的模型3.支持客户端与服务端 支持主流的B/

Web应用程序开发，基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

ASP.NET Core Web 应用程序开发期间部署到IIS自定义主机域名并附加到进程调试

原文:ASP.NET Core Web 应用程序开发期间部署到IIS自定义主机域名并附加到进程调试 想必大家之前在进行ASP.NET Web 应用程序开发期间都有用到过将我们的网站部署到IIS自定义主机域名并附加到进程进行调试. 那我们的ASP.NET Core Web 应用程序又是如何部署到我们的IIS上面进行调试的呢,接下来我们来简单介绍下: 一.安装IIS所需的Host扩展(Windows Server Hosting) 下载地址:https://dotnet.microsoft.com/

C#实现无物理边距真正可打印区域的绘图\打印程序开发

经常在开发实际的应用程序中,需要用到图形绘制和打印程序.如何实现完整的精确打印和绘图是需要注意许多细节地方的.最近在遇到打印问题的时候,仔细研究一阵,总结这篇博文,写得有点杂乱,看文要还请费点神. 基本功能:窗体绘图与鼠标交互  打印预览与打印输出 开发平台:VisualStudio 2010 (C#) 1绘图坐标系统 1.1绘图系统坐标转换(屏幕窗口/打印机) 绘图程序涉及到多种坐标系统,总体上可分为三个坐标系:世界坐标系.页面坐标系以及设备坐标系.想要将图形图像会知道最终的设备上,中间需要做

web应用程序开发原理

企业应用计算的演变为1.主机/哑终端的集中计算模式: 2.客户机/服务器计算模式:3.浏览器    /服务器计算模式.其中,1具有部署方面的优势,但在一台计算机中进行全部的处理,应用程序难于维护,难于集成其他平台上的其他平台上的其他应用程序  :2的优点在于信息共享性好,网络的信息传输量小,缺点是不易维护,用户操作界面风格不一致:3 客户端只需安装普遍使用的浏览器,只需在浏览器中输入相应网址.web应用程序的组成为四个部分:web服务器.web浏览器.网页和HTTP,其中网页由内容.结构.表现和

《web应用程序开发》上课板书

20200303 一.介绍Java web环境 JDK:java的开发工具包. Tomcat: web服务器软件,进行网站的发布.类似的还有:微软的IIS.PHP常用的web服务器软件是apache. eclipse:开发工具,称IDE(集成开发环境). 二.介绍新建项目 Dynamic web Project:动态web项目 静态页面(.html) 用户请求静态页面,服务器只是将其内容读出来,原样发回浏览器. 动态页面(.jsp) 动态页面能嵌入后台代码(java),需要服务器进行处理,生成h

web MVC程序开发增删改查参考代码。思路是面向对象思想，以及在HTML代码中嵌入C#代码

第一步:在Model中写好查询,删除,修改,添加方法,用sql_link类 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication2.Models { public class InfoBf { private MydbDataContext _Context = new MydbDataContext(); //查询 public

对 Web 应用程序进行性能调优

动态的 Web 应用程序能够存储大量信息,让用户能够通过熟悉的界面立即访问这些信息.但是,随着应用程序越来越受欢迎,可能会发现对请求的响应速度没有以前那么快了.开发人员应该了解 Web 应用程序处理 Web 请求的方式,知道在 Web 应用程序开发中可以做什么,不能做什么,这有助于减少日后的麻烦. 静态的 Web 请求(比如图 1 所示的请求)很容易理解.客户机连接服务器(通常通过 TCP 端口 80),使用 HTTP 协议发出一个简单的请求. 图 1. 客户机通过 HTTP 请求静态的文件 服

用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载和建立 Sencha Touch,通过一个样例应用程序探究基本原理.学习开始使用 Sencha Touch 框架所需的一切 2012 年 3 月 19 日 内容 概述 Sencha Touch 准备开始 UI components 结束语 参考资料 评论 概述 在软件开发领域中,有两个重要的趋势越来