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

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

lodop打印不显示页码_Lodop插件实现打印功能
下载lodop插件实现打印功能(element-ui框架) 一.vuejs弹窗部分 <el-dialog title="打印" width="960px" ...
JQuery 插件 JQprint 打印功能
jquery为我们提供了很多的插件,JQprint只是其中一种打印插件,可以很好的打印页面上的东西,包括设置的css 样式废话不多说,直接上代码: <script type="tex ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...
cad无法安装_快速实现CAD图纸中的一图多页批量打印功能教程
如何实现CAD批量打印功能有时工作中需要一张图纸里多页打印出来,如果每次用窗口框选或者"布局"进行打印有点浪费时间影响工作效率.下面分享一下博主如何进行一张图纸里多页进行打印,提高 ...
vue使用print.js实现打印功能，以及添加打印机
print.js 一个javascript库,可以实现打印功能 github地址 github地址: https://github.com/crabbly/print.js 官网地址 https:// ...
华硕Tinker Board开发板（rk3288处理器）开发 ---- 在Android7.1.2中某个apk项目中添加LOGD，LOGE等调试打印功能
1.找到你要添加LOG调试打印信息功能的那个apk项目所在源码位置,比如我的就是在Android7.1.2源码的packages/apps/Jni_demo 这个目录下,如下图所示: 2.在需要调用L ...
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？
什么是Vuex?只需三分钟!只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!(扔掉store文件夹和里面的index.getters.actions.mutations ...
window.print()方法实现打印功能，多出一张空白页
项目内需要实现一个打印的功能,用了window.print()方法,但是在打印的时候总是多出一张空白页,偶然搜到了一篇文章,(https://blog.csdn.net/web_houzhanguo/ ...
MIS开发中.net Framework的打印功能
Microsoft .net Framework的打印功能都以组件的方式提供,为程序员提供了很大的方便,但是这几个组件的使用还是很复杂的,有必要解释一下. 打印操作通常包括以下四个功能 1 打印设置 ...

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