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这一点上就做的很好，他提供了大量的属性方法，让用户的自由的配置。
好像一个更好的开源插件的想法就形成了。参考现有的两个项目的代码，好像难度也不大，有机会的话，尝试尝试。

作者：笙歌会停

原文地址：https://segmentfault.com/a/1190000021754340

喜欢 0