其他分享
首页 > 其他分享> > angular中使用essence-ng2-print插件实现打印功能

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()方法来打印。这样就可以满足自定义需求了。

标签:插件,essence,打印,组件,printStyle,ng2,按钮,print
来源: https://blog.csdn.net/yw00yw/article/details/89681262