首页 / JAVASCRIPT / Web打印解决方案之证件套打的实现思路

Web打印解决方案之证件套打的实现思路

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Web打印解决方案之证件套打的实现思路，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5468字，纯文字阅读大概需要8分钟。

内容图文

在前面介绍过《Web打印解决方案之普通报表打印功能》的一片文章中提到过那个打印控件Lodop，做起套打来感觉还是挺方便的，至少位置调整界面不需要自己弄，位置嘛，也提供了自动保存的功能，不需要理会。

一般的套打，包含了几部分操作：打印预览、打印维护、打印设计。

打印预览和打印维护是面向终端用户的，打印维护是指内容不能修改删除、但位置可以调整，给不同的打印机不同的尺寸打印提供调整位置的可能性。

打印设计是面向开发人员的，开始需要通过这个功能来设计好套打的界面，就是根据套打证件的背景图片，大致摆放好各个内容的位置。

大致的实现代码如下所示：

<script language="javascript">
var LODOP=document.getElementById("LODOP");//这行语句是为了符合DTD规范
CheckLodop();
</script>
<script language="javascript" type="text/javascript"> 
function Preview2() { 
CreateDataBill();
LODOP.PREVIEW(); 
}; 
function Setup2() { 
CreateDataBill();
LODOP.PRINT_SETUP(); 
};
function Design2() { 
CreateDataBill();
LODOP.PRINT_DESIGN();
}; 
function RealPrint() { 
CreateDataBill();
if (LODOP.PRINTA()) 
alert("已发出实际打印命令！"); 
else 
alert("放弃打印！"); 
}; 
function CreateDataBill() {
LODOP.SET_PRINT_PAPER(10,10,762,533,"打印控件功能演示_Lodop功能_移动公司发票套打");
LODOP.ADD_PRINT_TEXT(126,150,100,20,"郭德刚");
LODOP.SET_PRINT_STYLEA(1,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(151,150,100,20,"13954885177");
LODOP.SET_PRINT_STYLEA(2,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(125,584,99,20,"发票打印(第1次)");
LODOP.SET_PRINT_STYLEA(3,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,140,198,20,"陆百柒拾捌元叁角零分");
LODOP.SET_PRINT_STYLEA(4,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,599,70,20,"678.30");
LODOP.SET_PRINT_STYLEA(5,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,408,59,20,"H112063");
LODOP.SET_PRINT_STYLEA(6,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,58,100,20,"国内漫游通话");
LODOP.SET_PRINT_STYLEA(7,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,217,100,20,"584.00");
LODOP.SET_PRINT_STYLEA(8,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,58,100,20,"增值业务费");
LODOP.SET_PRINT_STYLEA(9,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,217,100,20,"48.30");
LODOP.SET_PRINT_STYLEA(10,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,58,100,20,"代收费");
LODOP.SET_PRINT_STYLEA(11,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,217,100,20,"50.00");
LODOP.SET_PRINT_STYLEA(12,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,58,100,20,"优惠费");
LODOP.SET_PRINT_STYLEA(13,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,217,100,20,"4.00");
LODOP.SET_PRINT_STYLEA(14,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(98,101,150,20,"101081005747319387");
LODOP.SET_PRINT_STYLEA(15,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(97,307,150,20,"2008年10月19日 10:28:38");
LODOP.SET_PRINT_STYLEA(16,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(152,584,103,20,"138860016786");
LODOP.SET_PRINT_STYLEA(17,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(95,571,112,20,"06775516");
LODOP.SET_PRINT_STYLEA(18,"FontName","System");
LODOP.SET_PRINT_STYLEA(18,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,135,183,20,"2008年09月(20080901-20080930)");
LODOP.SET_PRINT_STYLEA(19,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,572,112,20,"-王府井中心店营");
LODOP.SET_PRINT_STYLEA(20,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,217,100,20,"678.30");
LODOP.SET_PRINT_STYLEA(21,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,58,100,20,"费用合计");
LODOP.SET_PRINT_STYLEA(22,"FontColor",16711680);
LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/证件背景.jpg' />");
LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1);
}
</script>

其中大部分内容还是比较好理解的，不同的功能调用不同的函数Preview为预览、Setup为维护、Design为设计。

在套打的时候，注意需要通过下面代码来设置显示背景图片（打印的时候，是不打印背景的）。

LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/证件背景.jpg' />");
LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1); //打印预览时是否包含背景图

另外，由于报表的内容都是写在HTML页面中的，因此在动态设置内容的时候，一可以用脚本来读取界面元素作为数据源，二可以通过后台代码自动生成脚本代码，输出到前台页面中，看具体的需要了。

套打的预览界面大致如下图所示，其中蓝色部分是需要打印的内容，背景图片是一个发票的样板。

Web打印解决方案之证件套打的实现思路 - 文章图片

下面代码是通过脚本获取界面元素来取得相应的内容的，这种情况适合于界面上可能会修改一些打印的内容的情景。

LODOP.ADD_PRINT_TEXT(95, 695, 250, 52, document.getElementById("txtCompanyName").innerText); //业户名称
LODOP.SET_PRINT_STYLEA(1, "FontSize", 14);
LODOP.SET_PRINT_STYLEA(1, "Bold", 1);
var licenseDate = document.getElementById("txtLicenseDate").value;//证件有效期
var licenseYear = "";
var licenseMonth = "";
var licenseDay = "";
if (licenseDate != null && licenseDate != "") {
licenseYear = licenseDate.split("-")[0];
licenseMonth = licenseDate.split("-")[1];
licenseDay = (licenseDate.split("-")[2]).substr(0, 2);
}
LODOP.ADD_PRINT_TEXT(396, 190, 46, 22, validateYear); //有效期 结束 年 
LODOP.SET_PRINT_STYLEA(6, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(6, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 253, 30, 22, validateMonth); //有效期 结束 月
LODOP.SET_PRINT_STYLEA(7, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(7, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 304, 32, 22, validateDay); //有效期 结束 日
LODOP.SET_PRINT_STYLEA(8, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(8, "Bold", 1);

最后附上它的设计界面，其中生成代码功能可以生成用于静态HTML中的内容布局显示，做一定的修改调整就可以用在动态页面中了。非常有用的一个功能。

Web打印解决方案之证件套打的实现思路 - 文章图片

以上所述是小编给大家介绍的Web打印解决方案之证件套打的实现思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的Web打印解决方案之证件套打的实现思路全部内容，希望文章能够帮你解决Web打印解决方案之证件套打的实现思路所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/350013.html

来源：【匿名】

【上一篇】js 判断各种数据类型的简单方法(推荐)【下一篇】javascript 怎么调用php方法

更多 ►

【Web打印解决方案之证件套打的实现思路】教程文章相关的互联网学习教程文章

layer,一个可以让你想到即可做到的javascript弹窗（层）解决方案【代码】

学习网址：http://layer.layui.com/下载地址：http://res.layui.com/download/layer-v2.1.zip我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ‘‘})，　　layer.msg(‘‘, {time: 3})，　　其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的　　layer.open、　　layer.msg、　　就是内置方法。但我们通常还会在...

javascript移动端禁止页面滑动的解决方案【代码】

1 前言移动端网页，发现ios平台的iphone或者ipad，网页可以上下左右移动，而Android版则不会。仅作为记录使用。2 代码var mo=function(e){e.preventDefault();}; function stop(){document.body.style.overflow=‘hidden‘; document.addEventListener("touchmove",mo,false);//禁止页面滑动 } //直接默认不让滑动 stop();/***取消滑动限制***/ function move(){document.body.style.overflow=‘‘;//出现滚动条document.re...

JavaScript学习--Item27 异步编程异常解决方案【代码】

1、JavaScript异步编程的两个核心难点异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能，且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦，其中比较核心的问题是：1、函数嵌套过深JavaScript的异步调用基于回调函数，当多个异步事务多级依赖时，回调函数会形成多级的嵌套，代码变成金字塔型结构。这不仅使得代码变难看难懂，更使得调试、重构的过程充满风险。2、异常处理回调...

Eclipse javascript卡死解决方案（转）【代码】

Eclipse中jsp、js文件编辑时，卡死现象解决汇总使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下： 1、取消验证windows–>perferences–>validation把除了manual 下面的全部点掉，build下只留 classpath dependency Validator 2、关闭拼写检查windows–>perferences–>general–> editors->Text Editors->spel...

详解基于vue的移动web app页面缓存解决方案

现在移动web app越来越热门了，许多公司开始尝试使用angular、react、vue等MVVM框架来开发单页架构的web app。但在开发web app时，如果希望页面的导航体验也接近原生应用，那一般都会遇到这两个问题：识别前进后退行为后退时恢复之前的页面笔者开发了一个基于vue与vue-router的导航库vue-navigation，来帮助开发者来解决这些问题，下面是问题的解决思路。识别前进后退先说第一个问题。和原生app不一样，浏览器中主要有这几个限制...

javascript客户端解决方案缓存提供程序

相信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(memcached,xcache等。) 来减轻db的压力。对内容分发网络（CDN）缓存中希望你的浏览器缓存那些不止一次的加载资源。当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算)。这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器. Starting Simple 代码如下:function CacheProvider() { // values will be stored here t...

js、css、img等浏览器缓存问题的2种解决方案

细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新方法一生成随机数字代码如下:<script type=”text/javascript“ src=”/js/test.js?+Math.random()“></script> 缺点，浏览器缓存失去意义，每次都动态加载。方法二版本号控制,设置全局变量，每次发布前版本号加1 代码如下:<script type=”text/javascript“ src=”/js/test.js?v=<%=v%>“></sc...

IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结

解决方法一：IE6 Hack脚本代码如下:<script> if(navigator.appName == "Microsoft Internet Explorer"){ var b_version=navigator.appVersion; var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(trim_Version=="MSIE6.0"){ ;//alert("IE 6.0"); try { document.execCommand("BackgroundImageCache", false, fix); }catch(err){ } } } </script> 解决方法二：IE6 Hack注释代码如下:<!--...

Nginx上传文件全部缓存解决方案_javascript技巧【图】

下面通过文字说明给大家详解Nginx上传文件全部缓存解决方案。因为应用服务器（Jetty）里面实现了上传时写了进度条。经过缓存。就没法读取到进度了。此外，在Nginx处缓存文件，也降低了传输效率。 nginx采用1.5.6。后端采用nodejs+formidable的方式接受上传文件，本问题的对应与采用什么样的后端没太大关系，这里只是交代一下。问题：在前端页面上将文件上传，nginx没有将每一块收到的文件数据块转发给后端，而是全部缓存了下来...

vue spa应用中的路由缓存问题与解决方案【图】

单页面应用中的路由缓存问题通常我们在进行页面前后退时，浏览器通常会帮我们记录下之前滚动的位置，这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位。但是在现在愈发流行的SPA(single page application 单页面应用)中，当我们从父级页面打开子级页面，或者从列表页面进入详情页面，此时如果回退页面，会发现之前我们浏览的滚动记录没有了，页面被置顶到了最顶部，仿佛是第一次进入这个页面一样。这是因为在spa页面中的...

浅谈Vue页面级缓存解决方案feb-alive(上)

feb-alive github地址体验链接使用理由开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据feb-alive会帮你处理路由meta信息的存储与恢复为什么开发feb-laive？当我们通过Vue开发项目时候，是否会有以下场景需求？ /a跳转到/b后退到/a时候，希望从缓存中恢复页面再次跳转到/b时，...

浅谈Vue页面级缓存解决方案feb-alive (下)【图】

feb-alive github地址体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前，希望大家对以下基本知识有一定的了解。 keep-alive实现原理history apivue渲染原理vue虚拟dom原理feb-alive与keep-alive差异性1. 针对activated钩子差异性keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子，因为切换的时候组件没有变化，所以只能通过beforeRouteUpdate钩子或者监听$route来实现数据更新，而fe...

浅谈微信页面入口文件被缓存解决方案

缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下几种形式，一般情况1、添加版本号，在静态资源文件的引用链接后面添加版本号，这样每次发布的时候更新版本号，就能让叫客户端加载新的资源文件，避免再次使用缓存的老文件，如 <script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>2、文件...

vue单页缓存存在的问题及解决方案(小结)

1.css同名覆盖,解决方法：父组件加上scoped <style lang="scss" scoped>@import ./unbind.scss </style>子组件同名样式加上deep/deep/ .tabs-row {.items-wrp{padding-left: .34rem;}.item {margin:0 .12rem .16rem 0;}}2.事件全局绑定绑在window或document或body上的事件，切换到下一个页面同样会被触发，需要销毁，也防止内存泄漏,全局绑定的事件如果是公用组件慎用off().on(),因为可能引用的其他的组件全局绑定的事件被移除des...

javascript客户端解决方案缓存提供程序_javascript技巧

相信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(memcached,xcache等。) 来减轻db的压力。对内容分发网络（CDN）缓存中希望你的浏览器缓存那些不止一次的加载资源。当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算)。这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器. Starting Simple 代码如下: function CacheProvider() { // values will be stored here ...

首页 / JAVASCRIPT / Web打印解决方案之证件套打的实现思路

Web打印解决方案之证件套打的实现思路

内容导读

内容图文

内容总结

内容备注

内容手机端

【Web打印解决方案之证件套打的实现思路】教程文章相关的互联网学习教程文章

WEB - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程