pdf导出颜色失真是因浏览器默认“降色”所致，需在@media print中添加-webkit-print-color-adjust: exact、color-adjust: exact、print-color-adjust: exact三行css强制绕过；同时确保元素有宽高、puppeteer启用printbackground:true等工具链适配。
PDF导出时颜色失真不是CSS写错了，而是浏览器主动“降色”
默认情况下，Chrome、Edge、Safari 等浏览器在触发打印或 PDF 导出流程时，会把 background-color、box-shadow、border-color 等非文本色块统一抹成白色或灰度——这不是 bug，是设计行为。目的是节省墨水、加快打印速度。所以你看到 HTML 页面里深蓝背景表格，导出后变白，根本不是 CSS 没生效，而是被浏览器的“打印优化”策略拦截了。
关键判断依据：打开浏览器打印预览（Ctrl+P 或 Cmd+P），如果预览里颜色已经消失，那 PDF 导出必然失真；如果预览里颜色正常，问题才出在 PDF 工具链（如 Puppeteer 的 printBackground: false）。
必须加的三行 CSS：-webkit-print-color-adjust、color-adjust、print-color-adjust
这三者不是可选补丁，而是强制绕过浏览器默认降色策略的最小必要声明。缺任意一个，在特定浏览器或版本下就可能失效：
-
-webkit-print-color-adjust: exact !important：针对 Chrome/Safari，WebKit 内核唯一认的“别删我颜色”开关 -
color-adjust: exact !important：W3C 标准属性，Firefox 107+ 和新版 Edge 依赖它 -
print-color-adjust: exact !important：color-adjust的历史别名，用于兼容旧版 Firefox 和某些 wkhtmltopdf 衍生工具
它们必须写在 @media print 块里，或直接放在 body 或通用容器上。单独只写 background-color 是没用的——浏览器先执行降色，再渲染背景。
为什么加了 exact 还是灰？检查 color-scheme 和系统色彩管理
即使三行都写了，仍可能看到颜色偏灰、发暗或泛蓝。常见真实原因：
- 系统级色彩配置干扰：macOS 的 Display P3 屏幕、Windows HDR 模式、或系统“夜览”功能会动态映射 sRGB 色值，导致同一
#4A90E2在屏幕和 PDF 中数学值一致，但人眼感知不同 - CSS
color-scheme: dark触发浏览器自动亮度补偿：部分浏览器会对深色模式下的background-color做隐式 gamma 调整，哪怕你没写任何 media query - 设计稿本身非 sRGB：Figma/Sketch 导出的 Hex 值若来自 P3 色域画布，直接复制进 CSS 就会偏艳——而 PDF 只支持 sRGB，转换时必然压缩
验证方法：用浏览器开发者工具打开“Computed”面板，看 background-color 最终计算值是否还是你写的原始 Hex；如果不是，说明有其他规则（比如 CSS 变量计算、filter、或全局 theme 注入）在中途改写了它。
Puppeteer / html2canvas / iText7 各自要额外做什么
前端 CSS 加对只是第一步，不同 PDF 工具链还有各自必须配的开关：
- Puppeteer / PuppeteerSharp：
pdf({ printBackground: true })必须显式传入，否则exact声明完全不生效 - html2canvas：它不走浏览器打印流程，而是截图，所以
exact无效；必须靠scale提升 canvas 分辨率，并确保目标元素background-color在截图前已稳定渲染（避免因异步加载导致取色为空） - iText7（HTML to PDF）：需要在 Java 层启用
converterProperties.setCssApplierFactory(...)并注册支持print-color-adjust的解析器，否则 CSS 规则直接被忽略
最易忽略的一点：所有工具链中，background-color 生效的前提是元素有明确宽高（display: block + width/height 或内容撑开）。空 div 即使写了背景色，在 PDF 渲染阶段也会塌陷为 0px 高，结果就是“看不见颜色”，而不是“颜色不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
