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 - 開始打印內容