项目环境Angular：
方法1、window.print()
HTML页面上的代码：
<div id="tenementBillTable" class="dialog-content">
<div *ngFor="let item of dataList" class="table-container">
<div class="table-header">电费清单</div>
<div class="table-info">
<div class="clearfix">
<span class="fl">户 名：</span>
<div class="fl">{{item.tenementName}}</div>
</div>
<div class="clearfix">
<span class="fl">电费年月：</span>
<div class="fl">{{item.month}}</div>
</div>
</div>
<div class="table-wrapper">
...
</div>
</div>
</div>
ts文件中:
printList(){
this.tenementBillTable = this._elementRef.nativeElement.querySelector("#tenementBillTable");
document.body.style.visibility = "hidden";
this.tenementBillTable.style.visibility = "visible";
window.print();
document.body.style.visibility = "visible";
}
然后再用css控制打印分页
page-break-before，page-break-after属性控制分页。
不过在实际应用中，我需要打印的是弹框中的内容，使用原生的方法打印，页面的样式无法调整，故放弃使用这个方法。
方法2、jqprint插件
项目中引用jQuery不方便，也没有找到具体文档，所以这个方法还没试过。
方法3、essence-ng2-print基于angular的打印插件。
安装依赖
npm install --save essence-ng2-print@latest
html文件中引入
<essence-ng2-print #print [printHTML]="tenementBillTable" [showBtn]="false" [printCSS]="printCSS"></essence-ng2-print>
在module里面引入
import {EssenceNg2PrintModule} from "essence-ng2-print";
@NgModule({
imports: [
EssenceNg2PrintModule
]
})
组件中引入
import { EssenceNg2PrintComponent } from "essence-ng2-print";
再使用
@ViewChild("print") printComponent: EssenceNg2PrintComponent;
然后需要设置打印时使用的css文件。
this.printCSS = ["assets/css/print.css"];
不过打印的时候也还是会有分页的问题，根据需要，在css文件中添加了page-break-after样式来控制打印分页。
.table-container:nth-child(3n) {
page-break-after: always;
}
其他的设置根据api文档里面可做具体的设置。
https://www.npmjs.com/package/essence-ng2-print
Inputs
mode（?string='iframe'） - 打印模式。可选的值：iframe，popupstandard（?string='html5'） - 弹出窗口的网页文档标准，只适用于mode = 'popup'。可选的值：strict（严格模式），loose（兼容模式），html5（HTML5）popTitle（?string=''） - 弹出窗口的标题，只适用于mode = 'popup'showBtn（?boolean=true） - 如果为true将显示打印按钮btnText（?string='打印'） - 打印按钮显示的文本btnClass（?Object={"print-btn": true,"print-btn-success": true};） - 打印按钮class，传值与[ngClass]一样printHTML（string|HTMLElement） - 打印的内容printStyle（?string） - 打印内容style。将写进打印页面的style标签中printCSS（?Array<string>） - 打印内容css文件路径。将在打印页面生成link标签，支持绝对/相对路径（相对于当前路由地址），建议用绝对路径Outputs
printComplete - 打印完成的事件
Instance Method
print - 开始打印内容
