HTML5技术

web在线打印,打印阅览,打印维护,打印设计 - Tualatin

字号+ 作者:H5之家 来源:博客园 2015-12-23 08:51 我要评论( )

winform打印的方案比较多,实现也比较容易,而且效果也非常炫;但现在越来越多的系统是web系统,甚至是移动端。网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕着众多的程序员,或者就是web 打印需要浏览器安装 ActiveX

  winform打印的方案比较多,实现也比较容易,而且效果也非常炫;但现在越来越多的系统是web系统,甚至是移动端。网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕着众多的程序员,或者就是web 打印需要浏览器安装 ActiveX 组件,ActiveX安装不容易成功等等问题。

  下面我们来看一种web在线阅览,在线编辑,在线打印的解决方案,Lodop这一款在线打印工具在各版本浏览器的兼容性表现不错,功能方面,我们常用的打印阅览,打印设计,打印机设置等他都提供了,而且额外的功能也是很多的,足够我们开发使用了。他对浏览器安装 ActiveX 组件提供了另外一种方法,首先检测有没有安装插件,未检测到插件时,自动提示,并给出下载插件的地址,这里的插件使用的是exe 格式的,这样就避免了浏览器安全设置的问题,至于怎么安装这里就不在赘述。

  1.准备工作:

  下载lodop:,解压后放到工程中,在页面引入如下代码:

<script src="~/Scripts/Lodop组件包/LodopFuncs.js"></script>

<script type="text/javascript" language="javascript" src="../Lodop/LodopFuncs.js"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"> 
    <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" pluginspage="../Lodop/install_lodop.exe"></embed>
</object>  

  其中: <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" pluginspage="../Lodop/install_lodop.exe"></embed>

 是专为 FireFox 浏览器设计的代码,如果你这个打印控件只在 IE 上应用,那么上面这名话完全可以不用的。

只这样加就行了: 

<script type="text/javascript" language="javascript" src="../Lodop/LodopFuncs.js"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"> 
</object> 

  把这些引入页面以后,剩下的就是一些基本的lodop API调用了。

  2.加几个按钮调用

> ).Icon().Click().ToolTip() ).Icon().Click().ToolTip() ).Icon().Click().ToolTip() ).Icon().Click().ToolTip() ).Icon().Click().ToolTip() 7 </div>

  3.这些按钮对应的方法  

1 var LODOP; //声明为全局变量 function print_preview() { 4 CreatePrintPage(); 5 LODOP.PREVIEW(); 6 }; function print() { 9 CreatePrintPage(); 10 LODOP.PRINT(); 11 }; function print_printA() { 14 CreatePrintPage(); 15 LODOP.PRINTA(); 16 }; function printSetup() { 19 CreatePrintPage(); 20 LODOP.PRINT_SETUP(); 21 }; function printDesign() { 24 CreatePrintPage(); 25 LODOP.PRINT_DESIGN(); 26 }; function CreatePrintPage() { 29 LODOP = getLodop(); ); ); 32 //设置打印页面属性:2:表示横向打印,0:定义纸张宽度,为0表示无效设置,A4:设置纸张为A4 LODOP.SET_PRINT_STYLE(, 18); , 1); )[0].contentWindow.document.body.innerHTML); 37 }

  具体API不用详细介绍,这里只说一下ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项,

$('#CurrentDocumentPage')[0].contentWindow.document.body.innerHTML,就是Iframe页面的内容,需要仔细研究的可以到lodop官网查阅。

style=> style=position: relative;margin: 5px;padding-top: 5px;padding-left: 5px;</div>

 $("#CurrentDocumentPage").attr("src", viewUrl);

  4.最终效果

  页面内容

  打印阅览

   打印维护的目标用户是页面操作者,开发者在根据业务需要将该界面提供给操作者时,有时会发现其默认功能权限不符合业务要求(亦多亦少),如下是默认的功能权限范围,试着改变勾选,看看演示程序是如何通过SET_SHOW_MODE函数解决这一问题的。

1:位置移动和宽高调整
2:颜色选择
3:字体名选择
4:字大小选择
5:旋角调整
6:粗斜体功能条
7:线型功能条

 8:对齐功能条
 9:删除功能
10:页眉设置
11:页脚设置
12:位置锁定功能
13:属性设置
14:显示关闭钮(界面内嵌时)

  打印机设置 

  5.总结:

  最后,简单说下Lodop的优势吧:

    (1)、操作简单,API通俗易懂,兼容性好,主流的浏览器都支持了;

    (2)、插件能实现自动安装提醒,并且不需要其他额外的设置;

    (3)、打印维护能够实现权限控制,比如在不修改内容的前提下修改打印的样式,比如调整字体,比如调整位置等等

    (4)、用户设计的打印页面,可以作为个性化的个人设置,系统维护的同一个模板可以适应不同的打印机。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 吉特仓库管理系统- 斑马打印机 ZPL语言的腐朽和神奇 - 贺臣

    吉特仓库管理系统- 斑马打印机 ZPL语言的腐朽和神奇 - 贺臣

    2016-07-21 16:00

  • 6款最好的免费在线二维码生成器 - 帅的相对论

    6款最好的免费在线二维码生成器 - 帅的相对论

    2016-04-03 10:00

  • [原创开源项目]EPUBBuilder一款在线的epub电子书编辑工具 - 方方和圆圆

    [原创开源项目]EPUBBuilder一款在线的epub电子书编辑工具 - 方方和圆

    2016-02-20 16:00

  • 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作 - 伍华聪

    基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的

    2016-01-21 17:10

网友点评
d