vue.js 核心UI的卡片组件未显示在打印预览中

snvhrwxg  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(261)

我正在尝试使用Core UI frameworkCard组件。当我尝试打印页面时,卡片组件和关联图标的颜色不会显示在预览中。
我尝试使用打印类(.d-print-*),但没有成功。
简单的复制步骤:

关于如何解决此问题有任何提示吗?

yzuktlbb

yzuktlbb1#

浏览器可能有一个设置,这意味着默认情况下不会打印背景颜色和图像。用户必须特别更改这个设置才能看到这些。这是为了防止在色彩浓厚的背景上过度使用油墨。
然而,正如这个问题所发现的,这可能意味着打印输出不够清晰或与屏幕外观相差太多。
有一个CSS属性可以被设置来尝试克服这一点:print-color-adjust: exact;
参见MDN
请注意,有些浏览器需要-webkit-前缀,而且不能绝对保证这将被执行。
因此,您可以考虑其他几个选项:建议用户将浏览器设置为打印背景,或创建一个专门用于打印的版本,该版本在不打印背景的情况下可读(例如,具有更强的边框)。
你甚至可以让用户选择是否使用背景色-他们的选择。

相关问题