CSS page-break-after not working when printing Angular Material dialog

user_5046226 0
Viewed 2355

I have an angular material dialog box that I wish to print out.

I have placed as explained here (Can I force a page break in HTML printing?) a page break div like so:

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

When I do this, the page break is ignored.

I have tested the printing by placing the exact same HTML on a different non-dialog page and it does indeed work as expected.

Is there a way to over-ride the dialog css when printing to allow the page break to work? I think it has something to do with box-sizing as can be seen by the answer of Yuri here: CSS Page-Break Not Working in all Browsers

angular-material css
2 Answers
user_35644020

I used page brake in angular component in below way. Apply the style page-brake-before:always inside div tag and this needs to be used inside a table tag. separate with the table tags whenever you want to brake the page. Hopefully it helps!

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);
              }
user_139785970
Related