angular打印

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

没那么简单

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

但是在打印需要本地css的项目时,却失去了样式,而且引入本地css也没效果

好像也能看,就是丑了点,之后尝试自己写方法调用print函数,但也是一样的没有css,而且自己还不知道在这里该如何引入。

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

但是并没有……

更好的解决方案

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

使用方法

使用方法很简单

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>

效果让人很满意。

还有另外的几个可选属性,若有兴趣,可以去github查看。

这个插件就完美了吗

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

以上是 angular打印 的全部内容, 来源链接: www.h5w3.com/z/696837.html

回到顶部