JS达到Web指定保存的和打印功能的内容 背景 问题 新大陆 组件 实现 结束语



首先,说说文章的背景。近期手中的一个项目,因为需求中要求提供Web界面的打印功能。当然假设没有打印机,还能够提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想,领了任务之后,就立即開始了工作。


问题


刚開始的时候。组长给了一个工具(jatoolsprinter)让我研究。我用了一个多小时的时间,做出了一个简单的Demo,然后就是各种的測试,因为 web 打印须要浏览器安装 ActiveX 组件。在随后的測试中,我用了几款浏览器。甚至把安全级别都调到了最低的要求, ActiveX 组件的安装总是不成功。之后的几个小时也在一直调这个问题。

最终,它打破了我耐心的底线,就这样被我“无情”的给抛弃了。



新大陆


吃过晚饭回来之后,我就開始走上了寻找新大陆的征途中。还好。我的运气不错,web 打印这个功能还是非经常常使用的。

非常快我就有了一个新的解决方式。在简单的了解了一下官方的说明之后,找了一个文档看了看。这次我吸取了上次的教训,我先把官方提供的插件制作成了 CAB。并且立即就展开了測试,通过測试。我发现这一款工具在各版本号浏览器的兼容性表现还是不错的,至于功能方面,我须要的他都提供了,并且额外的功能也是非常多的。足够我们开发使用了。对了。不得不提的是。他对浏览器安装 ActiveX 组件还提供了第二种方法,首先检測有没有安装插件。未检測到插件时,自己主动提示,并给出下载插件的地址,这里的插件使用的是 exe 格式的。这样就避免了浏览器安全设置的问题。



组件

  • 组件名称:Lodop(提供下载)
  • 须要引入的文件:lodop.cab(自己制作的)、LodopFuncs.js(必须的)、install_lodop32.exe(可选的,官方提供的exe格式插件)
  • 须要在页面中增加对象引用
JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语

点击安装之后,浏览器就会自己主动的安装,然后就能够看到以下的提示了。

JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语


实现

  • 首先是打印功能

html 代码



js 代码




效果图


JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语

点击。打印预览之后。就会出现以下的效果:

JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语

当然。你还能够选择打印机,在打印预览里边也能够进入这个页面。仅仅须要点击设置就可以。

JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语

  • 然后是保存功能
html 代码同样,这里就不再反复贴了

js 代码




效果图


JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语

点击“导出为Word”之后,会出现一个与ActiveX控件交互的提示,点击“是”之后。就能够保存到word中了。

JS达到Web指定保存的和打印功能的内容
背景
问题
新大陆
组件
实现
结束语


结束语


怎么样,非常easy吧!web 页面打印指定内容事实上就这么简单。

仅仅要找对好的工具,什么都不它是一个事!


版权声明:本文博主原创文章,博客,未经同意不得转载。