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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
javascript编程起步(第一课)
Jan 10 Javascript
学习js所必须要知道的一些
Mar 07 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
JS出现失效的情况总结
Jan 20 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php实现的递归提成方案实例
2015/11/14 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
webpack4简单入门实例
2018/09/06 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python处理json数据中的中文
2014/03/06 Python
Python 探针的实现原理
2016/04/23 Python
JSON Web Tokens的实现原理
2017/04/02 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
中国文明网签名寄语
2014/01/18 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技