• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > web打印小结

web打印小结

作者:cherrytree 字体:[增加 减小] 来源:互联网 时间:2017-05-11

cherrytree通过本文主要向大家介绍了web打印控件,web打印,web打印控件lodop,web打印插件,楚琳web打印控件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

项目中有个需求是将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>
</div>

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);
</div>
<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>
</div>

6、JS参数性质的改动

总结:

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • web打印小结

相关文章

  • 2017-05-11jQuery树插件zTree使用方法详解
  • 2017-05-11JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
  • 2017-05-11jQuery实现文章图片弹出放大效果
  • 2017-05-11javascript正则表达式模糊匹配IP地址功能示例
  • 2017-05-11JavaScript中双向数据绑定详解
  • 2017-05-11jQuery实现CheckBox全选、全不选功能
  • 2017-05-11基于vue实现多引擎搜索及关键字提示
  • 2017-05-11JavaScript数据结构中串的表示与应用实例
  • 2017-05-11canvas时钟效果
  • 2017-05-11vue调用高德地图实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript调试的多个必备小Tips
    • NodeJS配置HTTPS服务实例分享
    • JS判断指定dom元素是否在屏幕内的方法实例
    • JavaScript登录记住密码操作(超简单代码)
    • jQuery实现给input绑定回车事件的方法
    • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
    • js获取地址栏中传递的参数(两种方法)
    • 3种页面加载完成后再执行JS的jquery写法以及区别说明
    • jquery实现拖动效果(代码分享)
    • js读取json文件片段中的数据实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有