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程序中美元符号$是什么
Jun 05 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
node.js入门学习之url模块
Feb 25 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
javascript防抖函数debounce详解
2019/06/11 Javascript
详解package.json版本号规则
2019/08/01 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python logging日志模块的详解
2017/10/29 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
python实现操作文件(文件夹)
2019/10/31 Python
python二元表达式用法
2019/12/04 Python
python logging模块的使用
2020/09/07 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
高三自我鉴定
2013/10/23 职场文书
饭店工作计划书
2014/01/10 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
五年级科学教学反思
2014/02/05 职场文书
党员组织关系介绍信
2014/02/13 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016年端午节寄语
2015/12/04 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle