js打印窗口内容并当窗口内容较长时自动分页

项目环境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">户&nbsp;&nbsp;&nbsp;&nbsp;名：</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 - 开始打印内容