web打印小结


Posted in Javascript onJanuary 11, 2017

项目中有个需求是将winform客户端的打印,移到网页上由客户自行打印,打印要求是根据一定的格式实现套打。

当时的解决方案是使用PDF打印:

1、 准备好套打格式的底图;

2、打开底图,将动态内容画到底图上;

3、利用第二步修改后的图片,生成PDF,完成打印

后来发现一款比较强大的web打印工具lodop,简单使用说明如下:

1、先检查下浏览器是否安装此插件:

   http://www.lodop.net/demolist/PrintSample1.html

2、建立html,此入口可以打开一个图形化编辑页面,生成结果图如下:

<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() { 
 LODOP.PRINT_INIT("测试套打模板");
 };
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">进入模板设计</a>
</body>
</html>

3、我们可以将要套打的单据做成图片,导入这个图形化界面作为背景图,然后放入文本框等内容,开始测试。

4、完成位置定位后,可以点击左上角的整体对准图标,做统一调整。

5、去掉背景图,生成代码,放入JS代码段中

LODOP.PRINT_INIT("测试套打模板");
LODOP.ADD_PRINT_TEXT(107,225,338,30,"竞买人名称");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26,"手机号码");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);
<html>
<body>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0></object>
<script>
function myPreview() { 
 LODOP.PRINT_INIT("测试套打模板");
LODOP.ADD_PRINT_TEXT(107,225,338,30,"竞买人名称");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.ADD_PRINT_TEXT(421,116,209,26,"手机号码");
LODOP.SET_PRINT_STYLEA(0,"FontSize",13);
 };
</script>
<a href="javascript:;" onclick="javascript:myPreview();LODOP.PRINT_DESIGN();">进入模板设计</a>
</body>
</html>

6、JS参数性质的改动

总结:

PDF的难点在于要精确的计算出需要填充内容的位置,调试比较麻烦,而lodop是图形化界面,方便我们调试,并且语法简单,方便溶于JS中,此处仅仅简单列举了一个简单的实例,更多功能,可参考官网地址:http://www.lodop.net

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript call和apply方法
Nov 24 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
详解vue 图片上传功能
Apr 30 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
You might like
使用adodb lite解决问题
2006/12/31 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP中echo和print的区别
2014/08/28 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python 正则式使用心得
2009/05/07 Python
python根据路径导入模块的方法
2014/09/30 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
酒店营销策划方案
2014/02/07 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
房产公证书范本
2014/04/10 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
师范生教育见习总结
2015/06/23 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python