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 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP实现小偷程序实例
2016/10/31 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Vue中如何实现proxy代理
2018/04/20 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Python将多个list合并为1个list的方法
2018/06/27 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
什么是Python中的顺序表
2020/06/02 Python
Django视图类型总结
2021/02/17 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
结构和类有什么异同
2012/07/16 面试题
静态变量和实例变量的区别
2015/07/07 面试题
入党自我鉴定范文
2013/10/04 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
敬老院活动感想
2015/08/07 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python