Core UI Card组件打印预览样式不显示问题求助

1. 强制开启打印背景与颜色 #

浏览器默认会禁用打印背景图和颜色，需通过CSS强制开启渲染：

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

将这段样式添加到全局样式文件中，它会强制浏览器在打印时渲染元素的背景色、文字色及背景类图标。

2. 确保图标打印可见性 #

如果使用的是字体图标，需确认打印样式未隐藏图标元素，可针对性设置：

@media print {
  .c-icon {
    display: inline-block !important;
    color: inherit !important;
  }
}

同时检查图标父元素是否被display: none或visibility: hidden类（包括打印专属类）隐藏。

3. 覆盖Card组件的打印样式 #

Core UI的Card组件可能在打印样式中重置了背景或颜色，需针对性覆盖：

@media print {
  .card {
    background-color: #fff !important; /* 替换为你需要的背景色 */
    border-color: #dee2e6 !important;
    color: #212529 !important;
  }
  .card-header {
    background-color: rgba(0,0,0,.03) !important;
  }
}

根据你实际使用的Card样式，调整对应颜色值，保证打印样式与屏幕显示一致。

4. 调整浏览器打印设置 #

引导用户检查浏览器打印预览的设置：

• 打开打印预览后，找到「更多设置」选项
• 勾选「背景图形」（不同浏览器名称略有差异，如Chrome为“背景图形”，Firefox为“打印背景”）

内容的提问来源于stack exchange，提问作者leodotcloud