旺小宝 HTML 高质量 PDF 转换
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_2d5fa379/wangxiaobao-html-to-pdf。
技能介绍
要解决什么问题
很多 HTML 报告、海报或数据可视化页依赖 CSS 渐变、Grid/Flex、背景图和自定义字体。用浏览器「打印为 PDF」或简单 HTML 解析器,经常出现布局错位、背景丢失或字体回退。本技能面向「排版要和浏览器里看到的一致」的场景,把本地 HTML 或 HTTP(S) URL 转成可归档、可分享的 PDF。
如何工作
渲染引擎是 Playwright 无头 Chromium,走真实浏览器排版路径,而不是把 HTML 当纯文本抽出来。
- 输入:
source必填,可以是文件路径(如report.html)或完整 URL。 - 输出:
output可选;不写则与 HTML 同名生成.pdf。 - 页面尺寸:
--format(默认 A4)、--landscape、或--width/--height(如1200px×1697px)做 1:1 匹配设计稿;优先级为 宽高 > 横向 > 纸张格式。 - 默认 PDF 行为:打印背景开启(保留背景色与渐变),页眉页脚关闭;边距约上/下 15mm、左/右 10mm。
典型流程:确认路径或 URL → 按 HTML 设计宽度选尺寸 → 执行转换 → 检查文件大小并交付。
适用边界与注意点
- 依赖 Python 3.8+ 与已安装的 Playwright + Chromium;环境未就绪时会报 playwright 未找到。
- 若页面靠 JS 异步渲染,内容不全时可加长等待(文档默认约 5 秒)。
- 中文字体依赖系统或 HTML 内字体栈(如 PingFang SC、Microsoft YaHei);未安装时会出现缺字或回退。
- 含中文的路径可能触发编码问题,建议用规范绝对路径。
- PDF 与 HTML 不一致时,优先用
--width/--height对齐设计宽度,或在 HTML 里加 打印专用 CSS。
使用场景
- 内网生成的 HTML 周报含 Grid 与 CSS 渐变,需转成保留背景的 PDF 再邮件发给未访问内网的评审方。
- 线上已部署的数据可视化 HTML 页面,需从 HTTPS URL 导出 PDF,且 `--width` 与设计稿 1200px 一致避免缩放错位。
- 本地 `poster.html` 或活动落地页含背景色与 Flex 布局,不想手动开浏览器打印,需脚本化生成印刷用 PDF。
- 浏览器「打印为 PDF」后渐变和背景被去掉,需用开启 printBackground 的无头渲染还原与页面一致的版式。
适合人员
- 每月把 HTML 格式经营/数据报告交付给客户,对方明确要求 PDF 附件且版式与网页一致的业务分析人员。
- 维护 ECharts、D3 等可视化 HTML,需要把线上页面或本地模板固化成可归档 PDF 的数据可视化工程师。
- 用 HTML 做海报或宽屏报告,需按 A4 横向或自定义毫米/像素尺寸出 PDF 的视觉或前端设计人员。
- 文档流水线里 HTML 报表是中间产物,需在 CI 或批处理中自动转为可审计 PDF 的后端或 DevOps 工程师。