angular2 表格打印 -essence-ng2-print插件

1. 先下载essence-ng2-print到node_modules中

npm install --save essence-ng2-print

2. 在要用的模块的module中引入该插件

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

3. html中调用

 <div #print><essence-ng2-print [mode]="'popup'" [popTitle]="'表格打印'" [btnText]="'打印表格'" [btnClass]="{'btn': true, 'btn-info': true}" [printHTML]="print" style="float:right"[printStyle]="printStyle" [printCSS]="printCSS" [showBtn]="printBtnBoolean" (click)="beforePrint()" (printComplete)="printComplete()"></essence-ng2-print><table class="table table-bordered"><thead><tr><th>名称</th><th>时间</th></tr></thead><tbody><tr><td>张掖市</td><td>2019-1-12</td></tr><tr><td>石家庄</td><td>2019-2-18</td></tr></tbody></table></div>

4. 再ts中调用css

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

5. 属性详解

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：打印完成之后需要执行的代码

6. 关于是否显示打印按钮
我们在ts中定义一个布尔型的变量printBtnBoolean用来改变打印按钮的显隐，printBtnBoolean初始化为true，打印之前即click的时候改变为false，打印完成之后即printComplete的时候改为true，就可以完美的控制打印按钮的显示和隐藏。

7.总结，这些属性你并不一定都需要，比如我在实际应用中是这样用的

<essence-ng2-print [mode]="'popup'" [popTitle]="'表格打印'" [btnText]="'打印表格'" [btnClass]="{'btn': true, 'btn-info': true}" [printHTML]="print" [printCSS]="printCSS"
</essence-ng2-print>

除了必要的属性之外，我不需要控制打印按钮的显隐，我不用自定义样式，直接引入bootstrap到printCSS就可以了。具体需求看个人情况。

8.本文参考：https://www.jianshu.com/p/bac7f86e7b80

angular2 表格打印 -essence-ng2-print插件相关推荐

Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
目录需求描述方案1:直接打印页面方案2:使用css媒体查询控制打印内容方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
python print table_python 6.7 编写printTable()函数表格打印(完整代码)
编写一个名为printTable()的函数,它接受字符串的列表的列表,将它显示在组织良好的表格中,每列右对齐.假定所有内层列表都包含同样数目的字符串输入: tableData = [['apple' ...
Jquery.Print实现表格打印
使用Jquery.Print.JS进行自定义表格打印,功能包含分页打印. 1.样式以及引用js 备注: 使用样式对页眉页脚进行隐藏 <style media="print"& ...
python打印表格_怎么使用python脚本实现表格打印？
大家在办公学习中,有没有被打印机的功能所惊叹?可能大部分小伙伴并没有在意打印机的实现原理,只知道它是可以复印东西的,当小编提出这个问题的时候,那大家有没有考虑过呢?有些小伙伴可能会说这个和我们Pyth ...
python打印表格_python 6.7 编写printTable()函数表格打印(完整代码)
编写一个名为printTable()的函数,它接受字符串的列表的列表,将它显示在组织良好的表格中,每列右对齐.假定所有内层列表都包含同样数目的字符串输入: tableData = [['apple' ...
python函数表格_python 6.7 编写printTable()函数表格打印(完整代码)
编写一个名为printTable()的函数,它接受字符串的列表的列表,将它显示在组织良好的表格中,每列右对齐.假定所有内层列表都包含同样数目的字符串输入: tableData = [['apple' ...
python中怎么打印出表格_怎么使用python脚本实现表格打印？
大家在办公学习中,有没有被打印机的功能所惊叹?可能大部分小伙伴并没有在意打印机的实现原理,只知道它是可以复印东西的,当小编提出这个问题的时候,那大家有没有考虑过呢?有些小伙伴可能会说这个和我们Pyth ...
使用vue-print-nb打印element table时表格打印不全的问题
elment的表格设置宽度为100%之后打印还是不能将表格打印完整如下图 1.寻找问题为什么会出现这种情况,打开控制台查看代码原来是el-table 会计算100%宽度为具体多少px 然后再计算 ...

angular2 表格打印 -essence-ng2-print插件

angular2 表格打印 -essence-ng2-print插件相关推荐

最新文章

热门文章