chrome保存网页为pdf排版错乱，根本原因是未定义@media print规则，导致浏览器套用屏幕样式（如100vw、position:fixed）进入打印流程，引发布局塌陷；须在源码中添加@media print专用样式，并配合@page设置纸张参数、禁用硬件加速及关闭默认缩放。
谷歌浏览器保存网页为PDF时样式排版严重错乱，是因为Chrome的打印渲染引擎在生成PDF过程中会跳过部分CSS计算逻辑、忽略响应式单位、强制重设容器尺寸，并丢弃未显式声明为@media print生效的样式规则，导致Flex/Grid布局塌陷、vw/vh单位失效、背景图裁剪、固定定位元素错位甚至整页内容被截断。
确认是否为CSS媒体查询缺失导致
网页开发者若未定义@media print规则，Chrome将直接套用屏幕样式进入打印流程，而屏幕样式中大量使用width: 100vw、position: fixed、transform: scale()等特性，在PDF页面中无对应纸张上下文，必然崩坏。
打开F12开发者工具 → 切换到“元素”面板 → 点击左上角箭头图标选中一个明显错位的导航栏或卡片 → 右侧“样式”面板中搜索@media print → 若完全找不到相关规则，说明该网页未适配打印场景。
此时不要修改浏览器设置，【必须由网页源码添加@media print专用样式】，否则任何本地操作都无法修复根本问题。
强制绕过浏览器默认缩放与边距干扰
Chrome保存PDF时默认启用“适应页面”缩放并添加19mm页边距，这对网页原始布局是毁灭性覆盖。
按Ctrl + P（Windows/Linux）或Cmd + P（Mac）打开打印界面 → 在右侧设置中展开“更多设置” → 将“缩放”从“适应”改为“自定义”，输入100% → 取消勾选“页眉和页脚”“背景图形”。
这一步能阻止Chrome把1200px宽的容器硬压缩进A4宽度，但仅限于你有权限操作该网页的打印弹窗；若网页通过window.print()静默触发，则此设置无效。
用@page规则锁定物理纸张参数
@page是唯一能真正控制PDF输出尺寸、方向与边距的CSS机制，它不依赖JavaScript，不被浏览器UI设置覆盖，且在生成PDF时优先级高于所有其他样式。
方法一：直接注入样式（适用于可编辑网页）
在HTML的
方法二：命令行注入（适用于无法改源码但能控制访问方式的场景）
关闭所有Chrome窗口 → 右键桌面快捷方式 → 属性 → “目标”末尾加空格后填入：--disable-features=PrintPreviewNewDesign → 确定 → 启动后访问网页再执行打印。
【注意：不加--disable-features=PrintPreviewNewDesign会导致新版打印预览绕过@page规则】
禁用硬件加速并终结残留渲染进程
GPU加速在PDF导出阶段会错误复用屏幕合成缓存，造成z-index层级错乱、position: sticky失效、SVG路径渲染偏移。
第一步：关闭硬件加速
点击右上角三点 → 设置 → 系统 → 关闭“使用硬件加速模式（如果可用）” → 【必须彻底退出Chrome所有进程，不能只刷新或关标签页】。
第二步：清除GPU专属缓存
地址栏输入chrome://gpu/ → 拉到最下方点“检查是否已启用” → 若状态显示“软件后备”仍异常，则需手动清空GPU缓存目录：
Windows路径：%LOCALAPPDATA%\Google\Chrome\User Data\GPUCache
macOS路径：~/Library/Caches/Google/Chrome/Default/GPUCache
删除整个GPUCache文件夹后重启Chrome。
第三步：验证GPU状态
重新打开chrome://gpu/ → 查看“Graphics Feature Status”区块 → 所有项目应显示“Software only, hardware acceleration unavailable”。
