Chrome打印导出PDF时字体丢失或排版错乱，因默认禁用@font-face字体且忽略部分CSS媒体查询；需在@media print中显式定义关键样式、确保字体支持嵌入、避免fixed/transform布局，并用Rendering面板模拟打印预览。
Chrome 打印功能导出 PDF 时字体丢失或排版错乱
直接用 chrome 的 ctrl+p（windows）或 cmd+p（macos）调出打印面板，选“另存为 pdf”，是最轻量、最可靠的 html 转 pdf 方式。但它默认禁用网页中的自定义字体（尤其是 @font-face 加载的 web font），且会忽略部分 css 媒体查询（比如 @media print 外的 display: none 可能不生效）。
实操建议：
- 在 CSS 中显式声明
@media print，把关键样式（如字体、尺寸、分页）写进去，避免依赖屏幕样式 - 确保字体文件支持本地嵌入：用
font-display: swap或block，并检查字体文件是否被 CORS 阻止（控制台出现Cross-Origin Read Blocking (CORB)错误时，PDF 里字体会回退成系统默认） - 避免用
position: fixed或transform做布局——打印引擎对这些支持极差，容易整页空白或内容截断 - 测试前先在 Chrome 里打开开发者工具 →
Rendering面板 → 勾选Emulate CSS media type: print，提前看效果
Firefox 导出 PDF 时中文断行和页眉页脚异常
Firefox 的打印 PDF 功能对中文字体宽度计算偏保守，常导致长段落不换行、表格溢出单页，且默认页眉页脚（URL、标题、页码）无法通过前端 CSS 完全清除，只能靠浏览器设置干预。
实操建议：
- 在
@media print中强制设置word-break: break-word和hyphens: auto（需配合lang="zh"属性） - 用
page-break-inside: avoid包裹卡片类区块，防止表格或图片被硬生生切开 - 页眉页脚必须进 Firefox 设置：地址栏输入
about:config→ 搜索print.print_headerleft等项，全部清空字符串值 - 不要依赖
document.title控制 PDF 文件名——Firefox 保存时用的是当前 URL 的最后路径段，想改名得靠服务端生成或下载后重命名
用 window.print() 触发时页面闪退或无响应
调用 window.print() 后页面卡住、白屏、甚至整个标签页崩溃，通常不是代码写错，而是触发时机不对或 DOM 状态不稳定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 确保调用前 DOM 已完全就绪：不在
DOMContentLoaded之前调用；若含异步渲染（如 React/Vue 组件），等useEffect或mounted完成后再触发 - 避免在打印弹窗打开期间操作 DOM：比如
window.print()后立刻location.reload()或修改 body 类名，会干扰浏览器渲染管线 - 某些广告 SDK 或监控脚本会劫持
window.print，加个简单检测：if (window.print.toString().includes('[native code]')) { window.print(); } - 移动端 Safari 完全不支持
window.print()，别浪费时间适配——直接提示用户“请用桌面浏览器操作”更实在
PDF 导出后搜索不可用或复制乱码
导出的 PDF 看起来正常，但 Ctrl+F 找不到文字，或者复制出来是方块、问号、顺序错乱，说明浏览器把文字当成了图形（rasterized）而非文本（vector text），本质是字体未正确嵌入或编码缺失。
实操建议：
- 优先用系统已安装字体（如 macOS 用
"PingFang SC"，Windows 用"Microsoft YaHei"），比 Web Font 更稳妥 - 禁用
-webkit-print-color-adjust: exact——它会让文字强制转为位图，直接废掉可搜索性 - 如果用了 icon font（如 Font Awesome），改用 SVG 内联图标，否则 PDF 里只有一堆方框
- 复杂排版（多栏、CSS Grid）易触发降级渲染，简单点：打印专用样式尽量用
float+clear或纯flex，避开grid-template-areas
真正麻烦的不是怎么导出，而是导出后要不要再加工——比如加水印、合并页眉、插入目录。那些需求，浏览器原生方案真做不到，得承认边界。
