在本周的项目中遇到一个需求,打印页面的某些内容,本觉得是个很简单的需求,毕竟浏览器自带的就有打印功能,那不就成了调用一个函数的事情了吗?css
在开始向邢彦年学长明确需求的时候,邢彦年学长热心的提供了一个angular的插件—— essence-ng2-print
,看了看使用方法确实简单,并且好像也是符合个人需求的,但次日用的时候,才发现仅仅是好像而已,该插件在打印原生html项目时效果仍是很好的html
可是在打印须要本地css的项目时,却失去了样式,并且引入本地css也没效果
好像也能看,就是丑了点,以后尝试本身写方法调用print函数,但也是同样的没有css,并且本身还不知道在这里该如何引入。git
以后,去github搜索一下了这个插件,原本是想去找找有没有人提issue,没想到发现这个已经有了新版本,并且改动很大,当时还一阵窃喜,应该解决了用户痛点的吧
可是并无……github
以后在github上继续寻找,总算找到一个基本符合要求的:ngx-printnpm
使用方法很简单浏览器
npm install ngx-print
import {NgxPrintModule} from '[ngx-print](https://github.com/selemxmn/ngx-print)'; @NgModule({ ... imports: [NgxPrintModule, ...], ... }) export class YourAppModule { }
<!-- 1)- 经过id找到打印的目标 --> <div id="print"> 打印内容 </div> <!-- 2)- 设置指令(ngxPrint)到按钮上, 3)- 设置 printSectionId为目标id --> <button printSectionId="print-section" ngxPrint>print</button>
基本的打印功能已经有了,这解决了咱们上面的问题了吗?
并无,咱们还须要增长一个可选属性,useExistingCss
函数
<button printSectionId="print-section" ngxPrint [useExistingCss]="true">print</button>
效果让人很满意。spa
还有另外的几个可选属性,如有兴趣,能够去github查看。插件
并无,由于他提供的接口还不够多,好比咱们可能须要在打印前作点什么,或者在打印后作点什么,而essence-ng2-print
这一点上就作的很好,他提供了大量的属性方法,让用户的自由的配置。
好像一个更好的开源插件的想法就造成了。参考现有的两个项目的代码,好像难度也不大,有机会的话,尝试尝试。code