摘要：
然而，在实际应用中，我需要打印的是弹出框中的内容。本机方法用于打印，页面样式无法调整，因此我放弃使用此方法。this.printCSS=[“assets/css/print.css”]；但是，打印时仍会出现分页问题。根据需要，将分页符样式添加到css文件以控制打印分页。String='html5'）-弹出窗口的网页文档标准，仅适用于mode='popup'。String='print'）-打印按钮显示的文本btnClass（？Object={“print-btn”：true，“print-bvn success”：true}；）-打印按键类。传递的值与[ngClass]printHTML-打印内容printStyle（？String）-打印内容样式相同。它将被写入打印页面的样式标签printCSS（？Array＜string＞）-print-content-css文件路径。
项目环境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，popup standard（?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 - 开始打印内容