客户把文章页打印成 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 清晰 正文从合适的位置开始。
