打印Angular Material对话框时CSS page-break-after不起作用答案

【问题标题】：CSS page-break-after not working when printing Angular Material dialog打印Angular Material对话框时CSS page-break-after不起作用
【发布时间】：2020-06-26 04:36:28
【问题描述】：

我有一个角材质对话框，我想打印出来。

我已按照此处的说明 (Can I force a page break in HTML printing?) 放置了一个分页符 div，如下所示：

@media print {
  .pagebreak { page-break-before: always; }
}

当我这样做时，分页符被忽略。

我已经通过将完全相同的 HTML 放在不同的非对话框页面上来测试打印，它确实按预期工作。

有没有办法在打印时覆盖对话框 css 以允许分页符工作？我认为这与尺寸大小有关，这可以从 Yuri 的回答中看出：CSS Page-Break Not Working in all Browsers

【问题讨论】：

能否添加一个 StackBlitz 起点？
我在 dev mozilla 上阅读：此属性已被 break-after 属性所取代。 --> 链接中断后：developer.mozilla.org/en-US/docs/Web/CSS/break-after。希望对你有帮助
@MaGiO 这不起作用 - 很抱歉响应缓慢 - 因电晕而生病了

标签： css angular-material

【解决方案1】：

如https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

出于兼容性原因，旧的 page-break-before 属性应被浏览器视为 break-before 的别名

page-break-before 是旧属性，请尝试使用 break-before

【讨论】：

这不起作用 - 很抱歉响应缓慢，因电晕而生病:(

【解决方案2】：

我以下面的方式在角度组件中使用了页面制动。在 div 标签内应用样式 page-brake-before:always，这需要在 table 标签内使用。每当您想停止页面时，都与表格标签分开。希望对您有所帮助！

app.component.html:
        <button mat-icon-button class="float-right" tabindex="-1">
         <mat-icon (click)="printROE()">print</mat-icon> </button>
        
        app.component.ts:
            printROE(): void {
            const w = window.open();
            
            let printHtml = '<html><head><style>.inner-text{font-family: "Open Sans", sans-serif;font-size: 10pt;text-align: justify;}' +
                  '</style></head><body style="position:relative;">';
            
             printHtml += '<table width="100%" class="inner-text"><thead><title style="font-size:10pt;" align="center"></title></thead><tbody></tbody><tfoot></tfoot></table>';
            
             reportHtml += '<table width="100%" class="inner-text"><tr><div style="page-break-before: always;"></td></tr> </div></tr></table>';
            
            printHtml += reportHtml + '</body><footer></footer></html>';
             w.document.write(printHtml);
                w.document.close();
            
                setTimeout(() => {
                  w.focus();
                  w.print();
                  w.close();
                }, 900);
              }

【讨论】：