客户把文章页打印成 PDF,页头只剩一片白,logo 和深色页头都没了,正文挤到纸张最顶端。日志里能对上时间点,这种反而好排。

浏览器打印默认不输出背景色和背景图,logo 如果是 background-image 就整个丢掉,颜色也会被强制去掉,深色页头变白。这一点先确认清楚,后面就不用反复试。

@media print {
  .site-header { background: #fff !important; }
  .logo { display: block; }
}

围绕「打印背景图」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

报错里带路径的,先去看那个路径在不在、权限对不对。同一份配置存在多处的,先确认改的是被加载的那一份。

新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。

处理上按这个顺序:打印样式里 logo 改成 img 或者内联 SVG;需要保留背景就加 -webkit-print-color-adjust: exact;@media print 里把页头高度和边距重设一遍;用浏览器打印预览到 PDF 检查效果。

结果对不对很好判断,打印预览里页头 logo 清晰 正文从合适的位置开始。

作者 9823189