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

男娘i 2022-04-24 19:30 172阅读 0赞

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