HTML转PDF样式丢失主因是媒体查询和相对单位被忽略，需强制启用样式、换用pt/mm单位、显式写@media print并嵌入中文字体；动态内容需等待JS执行完毕；PDF体积大或文字不可选源于图片base64和字体未嵌入。
HTML 转 PDF 时样式丢失怎么办
直接用 wkhtmltopdf 或浏览器 printToPDF API 渲染 HTML，90% 的样式问题出在「媒体查询」和「相对单位」上。默认情况下，这些工具会忽略 @media print 外的 CSS，且不渲染 vh/vmin 等视口单位——它们在无窗口上下文里没意义。
- 强制启用所有样式：加
--no-stop-slow-scripts和--enable-local-file-access参数（wkhtmltopdf） - 把
rem/em换成pt或mm：PDF 是物理尺寸优先，16px ≈ 12pt，建议根字体设为12pt - 禁用
@media screen，显式写@media print，并在其中重置body { margin: 0; }防白边 - 背景图默认不打印，需加
-webkit-print-color-adjust: exact;或print-color-adjust: exact;
中文断行与字体嵌入失败怎么处理
Linux/macOS 下 wkhtmltopdf 默认不带中文字体，Windows 自带宋体但不嵌入，导致导出 PDF 里中文显示为方块或被替换成黑体——这不是编码问题，是字体资源缺失。
- 确认系统已安装字体：Linux 用
fc-list :lang=zh查看，macOS 检查/Library/Fonts/，Windows 查C:\Windows\Fonts\ - HTML 中用
@font-face显式加载本地字体文件（如simhei.ttf），并设font-family: "SimHei"，避免依赖系统回退 -
wkhtmltopdf启动时加--font-dir /path/to/fonts，并确保路径可读；若用 Docker，需挂载字体目录且在容器内执行fc-cache -fv - 导出后用
pdfinfo -meta your.pdf检查是否含嵌入字体，字段Fonts:下应有embedded标记
动态内容（Vue/React）转 PDF 渲染空白或未加载
静态 HTML 转 PDF 没问题，但 SPA 页面常因 JS 未执行完、路由懒加载未触发、或 SSR 未启用而输出空壳。这不是 PDF 工具的问题，是渲染时机没对齐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 服务端生成：用 Puppeteer 启动真实 Chromium 实例，等
page.waitForFunction(() => window.__APP_READY__)（自己设个全局标记）再截图 - 避免依赖
window.location或localStorage——Puppeteer 默认禁用部分 API，需显式启用--disable-features=IsolateOrigins - 若用
html2canvas + jsPDF客户端方案，注意 canvas 不支持跨域图片、transform层级错乱、以及position: fixed元素偏移 - 分页控制别靠 CSS
page-break-after：它在 canvas 截图里完全失效，改用绝对定位 +height: 297mm（A4）手动切区域
PDF 文件体积过大或文字无法复制
导出后 PDF 达几十 MB，或者打开只能看不能选文字，大概率是「位图替代矢量」或「字体未嵌入+未回退」。关键不是压缩，而是源头渲染方式。
立即学习“前端免费学习笔记（深入）”；
- 禁用
--image-quality 100（wkhtmltopdf默认就是 94，设太高反而增大体积） - 关闭图片转 base64：HTML 中不要用
data:image/...，改用file://或 HTTP 路径，并加--enable-local-file-access - 文字不可选 = 字体未嵌入或用了 webfont 但未声明
font-display: swap导致 fallback 失败；检查生成 PDF 的字体列表是否含Subtype: Type1或TrueType - 用
qpdf --stream-data=compress input.pdf output.pdf压缩流数据，比 Ghostscript 更轻量且不破坏文字可选性
最麻烦的其实是分页逻辑和页眉页脚的定位偏移——CSS 的 @page 在不同引擎支持度差异极大，wkhtmltopdf 不支持 :first 伪类，Puppeteer 又不支持 running() 函数。真要稳定输出，得放弃纯 CSS 分页，改用 JS 计算内容高度后手动插入分页符节点。
