angular打印

在本周的项目中遇到一个需求,打印页面的某些内容,本觉得是个很简单的需求,毕竟浏览器自带的就有打印功能,那不就成了调用一个函数的事情了吗?css

没那么简单

在开始向邢彦年学长明确需求的时候,邢彦年学长热心的提供了一个angular的插件—— essence-ng2-print,看了看使用方法确实简单,并且好像也是符合个人需求的,但次日用的时候,才发现仅仅是好像而已,该插件在打印原生html项目时效果仍是很好的
image.pnghtml

可是在打印须要本地css的项目时,却失去了样式,并且引入本地css也没效果
image.png
好像也能看,就是丑了点,以后尝试本身写方法调用print函数,但也是同样的没有css,并且本身还不知道在这里该如何引入。git

以后,去github搜索一下了这个插件,原本是想去找找有没有人提issue,没想到发现这个已经有了新版本,并且改动很大,当时还一阵窃喜,应该解决了用户痛点的吧
image.png
可是并无……github

更好的解决方案

以后在github上继续寻找,总算找到一个基本符合要求的:ngx-printnpm

使用方法

使用方法很简单浏览器

1.安装依赖

npm install ngx-print

2.在相应的NgModule中引入

import {NgxPrintModule} from '[ngx-print](https://github.com/selemxmn/ngx-print)';

@NgModule({
...
imports: [NgxPrintModule, ...],
...
})
export class YourAppModule {
}

3.设置打印按钮和打印目标

<!--
 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>

image.png

效果让人很满意。spa

还有另外的几个可选属性,如有兴趣,能够去github查看。插件

这个插件就完美了吗

并无,由于他提供的接口还不够多,好比咱们可能须要在打印前作点什么,或者在打印后作点什么,而essence-ng2-print这一点上就作的很好,他提供了大量的属性方法,让用户的自由的配置。
好像一个更好的开源插件的想法就造成了。参考现有的两个项目的代码,好像难度也不大,有机会的话,尝试尝试。code

相关文章
相关标签/搜索