angular中使用essence-ng2-print插件实现打印功能

在使用angular7做项目的时候，有个需求就是实现打印。百度搜索了一下，可以看到在angular中实现打印功能可以使用essence-ng2-print插件。网上也可以搜到其他的博客，但是真正用的时候发现还是不会用。

在经过摸索和请教大佬之后，经过尝试才实现了打印的初步功能。

正确使用：

1、安装

npm install --save essence-ng2-print

2、配置

在需要打印功能的组件module中导入EssenceNg2PrintModule，可以在根模块或者自定义模块中导入，都可以。

比如我是在自定义模块中导入：

import { EssenceNg2PrintModule } from 'essence-ng2-print';

@NgModule({
  declarations: [ProductOrderManageComponent, ProductOrderPrintComponent, OrderLabelPrintComponent],
  imports: [
    EssenceNg2PrintModule
  ]
})

使用

新建打印组件

<div #print>  // 需要打印的内容
 
</div>
    
<essence-ng2-print 
    #printBtn	// 这个是获取打印标签的dom,功能和自带的打印按钮一样。获取打印按钮的dom目的在于可以调用他提供的打印方法。
    [mode]="'popup'" 
    [popTitle]="'表格打印'" 
    [printHTML]="print"   // 这里需要注意的是获取上面打印的内容
    [printStyle]="printStyle" 
    [printCSS]="printCSS" 
    [showBtn]="false">
</essence-ng2-print>

新建组件的ts

css的引用方式有两种，目前使用的这种，试了试本地的css但是没有成功。

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { EssenceNg2PrintComponent } from 'essence-ng2-print';

@Component({
    selector: 'app-order-label-print',
    templateUrl: './order-label-print.component.html',
    styleUrls: ['./order-label-print.component.styl']
})
export class OrderLabelPrintComponent implements OnInit {
    // 打印数据
    printData = [];

    printCSS: string[];
    printStyle: string;

    @Input() printLabelInfo: [];
    // 这一步很重要：获取打印标签的按钮组件，然后调用提供的print方法
    @ViewChild('printBtn') printBtn: EssenceNg2PrintComponent;

    constructor() {
        this.printStyle = `
            * {
                padding: 0;
                margin: 0;
            }
        `;
    }

    ngOnInit() {
    }

    // tslint:disable-next-line: use-life-cycle-interface
    ngOnChanges() {
        this.printData = this.printLabelInfo;
        console.log(this.printLabelInfo);
    }

    print() {
        this.printBtn.print(); // 通过父组件来调用子组件的方法，用来触发打印功能
    }

}

属性解读

model：打印模式，popup是以弹窗的形式打印
popTitle：打印页眉上显示文字，一般用于打印的描述信息
btnText：打印按钮上显示的文字
btnClass：打印按钮的样式
printHTML：打印的内容，告诉打印组件我要打印的是那个标签里面的内容，对应标签要添加#print属性
printStyle：打印的内容样式
printCSS：打印的内容样式，跟printStyle都是定义样式的，但是printStyle是自己写css，printCSS是引用外部css
showBtn：是否显示打印按钮，这种情况是把<essence-ng2-print></essence-ng2-print>放到要打印的div里面的时候，点击打印的时候需要把打印按钮隐藏，但是按我上面这种形式打印不需要考虑这个问题
click：angular2中的事件绑定，及点击打印的时候需要执行的代码
printComplete：打印完成之后需要执行的代码

总结：

在使用的过程中其实很简单，但是需要注意的一个问题是，自带会提供一个打印按钮。一般我们的需求都是点击自定义的按钮来触发打印。所以可以按照上面的操作隐藏按钮的显示，然后通过获取按钮元素，通过按钮提供的print()方法来打印。这样就可以满足自定义需求了。