HTML怎么导出为PDF_HTML网页转PDF浏览器原生方法-html教程-PHP中文网

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 状态不稳定。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

确保调用前 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