AngularJS2之打印组件essence-ng2-print

简介

在项目中,我们经常要使用打印的功能,而AngularJS2又是非常新的框架,许多老的控件可能无法生效,在目前的项目中我们采用了essence-ng2-print,专门为ng2而生.接下来我就简单地说说如何使用这个组件,基础较好的朋友请直接查看Yarn-essence-ng2-print

如何安装组件

npm install --save essence-ng2-printyarn add essence-ng2-print

以上2条指令任选一种,npm、yarn都只是下载工具而已.

如何配置组件

找到main.module.ts并添加代码

 import {EssenceNg2PrintModule} from "@node_modules/essence-ng2-print"; @NgModule({     imports: [         EssenceNg2PrintModule     ] })

Demo

<div class="modal-body" #print_div>    <!--        将你需要打印的内容都放在这里    -->    <essence-ng2-print         [mode]="'popup'"         [popTitle]="'表格打印'"         [btnText]="'打印表格'"         [btnClass]="{'btn': true, 'btn-info': true}"         [printHTML]="print_div"         [printStyle]="printStyle"         [printCSS]="printCSS"         [showBtn]="printBtnBoolean"         (click)="beforePrint()"         (printComplete)="printComplete()">    </essence-ng2-print></div>

export class PrintModalComponent extends AppComponentBase {    printCSS: string[];    printStyle: string;    constructor(        injector: Injector    ) {        super(injector);        this.printCSS = ['http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'];        this.printStyle =            `             th, td {                 color: black !important;             }             `;    }    printBtnBoolean = true;    printComplete() {        this.printBtnBoolean = true;    }    beforePrint() {        this.printBtnBoolean = false;    }}

属性详解

属性 作用 mode 打印模式popup,即以弹窗的方式打印 popTitle 打印完成后在左上角显示的文字 btnText 按钮显示的文字 btnClass 由2部分组成,’btn’是指是否以扁平化方式呈现,’btn-info’是指样式,具体的样式可以参考前文链接查看 printHTML 打印的内容,也就是最外层div有一个#print_div的标记,就是为了告诉组件我需要打印的内容 printStyle 打印的内容样式,这部分是在ts中说明的 printCSS 同上,style与css几乎是必写的,不然打印的没有样式,很难看 showBtn 是否显示按钮,value为布尔值 click 单击事件,这个是ng2自带的,与该组件无关 printComplete 打印完成后执行的事件

按钮打印时消失,打印完显示

在打印功能中,按钮只是一个入口,打印时是不应该被打印进去的,如何实现这个机制呢?我说下我的思路,这个组件的showBtn属性告诉我们,如果为false则不显示,如果是true则显示按钮,我们可以形成思路:初始化为true,单击后为false,打印完成后再为true.
所以,我把showBtn的值设置为printBtnBoolean变量,初始化为true,单击时利用(click)=”beforePrint()” 将变量设置为false,这样打印的时候就不显示了,打印完成,执行(printComplete)=”printComplete()”,将变量改回true.

总结

以上是我近期对该组件使用的一些零碎心得,有需求的朋友建议还是看官方文档,更加深入地去理解该组件的应用.