ngx-print doesn't Print AngularMaterial component Styles

Question

I have Material Table With header and Footer cell in it. I am using ngx-print(version - 1.2.1)to print the table, If I add

[useExistingCss]="true"

it Shows blank page or no style at all.and with

styleSheetFile="custom.scss"

it is same issue. I have Created Stakblitz With material table Here.

I suspect that it doesnot support material design. But if anyone have a Solution Please Help me. Thank you

Same Table as it shows in my page with all default mat-table design. — tiana
– tiana, Commented Nov 9, 2021 at 8:10
Just remove id="print-section from table and adds seperate parent div tag to table with id="print-section" it will work for you. stackblitz.com/edit/… — Gaurang Dhorda
– Gaurang Dhorda, Commented Nov 9, 2021 at 8:14
you are right.it Does Work in Stackbitz but somehow i changed it in my component local it still gives me blank page. Scss is Loaded but No Table is shown.strange :) — tiana
– tiana, Commented Nov 9, 2021 at 8:32

Gaurang Dhorda · Accepted Answer · 2021-11-09 10:59:30Z

3

Just remove id = "print-section" from table tag and adds new parent div to table tag with id = "print-section"` , This is how it works here.

Demo in this Stackblitz

<div id="print-section">
  <table
    mat-table
    [dataSource]="transactions"
    class="mat-elevation-z8 colorTest" >
      .........
   </table>
</div>

EDIT

if above is not working then you can add your custom css with useExistingCss too just like below..

  <button mat-button  color="primary" printSectionId="print-section" 
     ngxPrint [useExistingCss]="true" styleSheetFile="assets/custom.scss">
     PrintWithCustomScss
 </button>

and then you have to put your custom css file inside asset folder.

edited Nov 9, 2021 at 10:59

answered Nov 9, 2021 at 9:09

Gaurang Dhorda

3,4072 gold badges24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ngx-print doesn't Print AngularMaterial component Styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related