使用ngx-print，背景始终打印为白色

Question

实际上我正在使用 ngx-print npm 库来打印我的 div ，它可以工作很好，唯一的问题是它没有像真实的那样显示背景颜色：

我的 HTML 代码：

<div class="hover-div">

    <button mat-button class="title-div" printSectionId="card-container" 

         printTitle="professionalcard" [useExistingCss]="true" ngxPrint>

            <div fxLayout="row">

                <mat-icon class="preview-icon">print</mat-icon>

                <div>print</div>

            </div>

     </button>

</div>

以前有人遇到过这个问题吗？ ，如果是的话，解决办法是什么，谢谢。

注意： 我还尝试在不使用库的情况下使用 打印 div ，并且我有总是同样的问题。window.print()

Answer 1

您可以添加-webkit-print-color-adjust:exact以真实颜色打印背景

Answer 2

-webkit-print-color-adjust&nbsp;属性是一个非标准扩展，可用于强制打印基于 WebKit 的浏览器后台使用的图像和颜色。默认情况下，它被初始化为economy，这就是背景未以真实颜色打印的原因，要解决此问题，我们必须将其值更改为：exact&nbsp;，这解决了 google chrom 的问题。此 CSS 在 Firefox 和 IE 中的替代方案是：color-adjust: exact | economy;。现在它工作得很好！