ngx-print 不打印 Angular Material 组件样式

Question

我有 Material Table 里面有页眉和页脚单元格。我正在使用 ngx-print(version - 1.2.1) 打印 table，如果我添加

[useExistingCss]="true"

它在 all.and 和

处显示空白页或无样式

styleSheetFile="custom.scss"

同样的问题。我用 material table Here.

创建了 Stakblitz

我怀疑它不支持material设计。但是，如果有人有解决方案，请帮助我。谢谢

Answer 1

只需删除 id = "print-section" from table tag and adds new parent div to table tag with id = "print-section"` ，这里是这样工作的。

演示在此 Stackblitz

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

编辑

如果上面的方法不起作用，那么您可以像下面一样使用 useExistingCss 添加您的自定义 css。

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

然后您必须将自定义 css 文件放入资产文件夹中。

ngx-print 不打印 Angular Material 组件样式

ngx-print doesn't Print AngularMaterial component Styles

printing

angular