Chrome打印不识别CSS Flex及Bold属性问题求解决方案

一、Flex属性不识别的解决办法 #

• 强制打印样式中声明Flex：Chrome打印时可能忽略部分CSS属性，在@media print规则里重新声明Flex相关属性，并添加-webkit-print-color-adjust: exact强制浏览器保留样式：

@media print {
  .flex-container {
    display: flex !important;
    -webkit-print-color-adjust: exact;
    flex-direction: row; /* 根据实际布局调整 */
    justify-content: space-between; /* 根据实际布局调整 */
  }
}

• 降级为浮动布局：如果Flex仍不生效，用传统浮动替代Flex实现布局，兼容性更强：

@media print {
  .flex-container {
    overflow: hidden; /* 清除浮动 */
  }
  .flex-item {
    float: left;
    width: 33.33%; /* 根据布局分配宽度 */
  }
}

二、加粗属性未读取的修复方案 #

• 确保字体支持粗体：自定义字体可能缺失粗体字重，优先使用系统默认字体（如Arial、Times New Roman）测试，或确认字体文件包含700字重版本。
• 强制指定粗体数值：在打印样式中用具体数值替代bold关键字，避免浏览器解析异常：

@media print {
  .text-bold {
    font-weight: 700 !important;
    font-family: Arial, sans-serif;
  }
}

• 排查样式重置：检查项目中是否有打印样式重置代码，避免font-weight被意外覆盖。

三、替代PDF打印库推荐 #

• jsPDF：纯前端PDF生成工具，支持通过API手动绘制内容，也可配合html2canvas将页面元素转为图片嵌入PDF，完全脱离浏览器打印限制，适合高度定制的PDF需求。
• html2pdf：基于html2canvas和jsPDF封装，只需传入目标DOM元素即可生成PDF，操作简单，能较好保留页面原有样式，适合快速实现页面转PDF功能。
• Print.js：轻量级打印工具，支持HTML、PDF、图片打印，可自定义打印样式，能规避浏览器打印的兼容性问题，配置灵活。

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