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