← 返回 Skills 市场
dtacheng

html-ppt-to-pdf

作者 DTacheng · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ 安全检测通过
118
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install html-ppt-to-pdf
功能描述
Convert any HTML slide deck that uses the `<section class="slide">` convention into a high-fidelity, vector-text PDF using Playwright + Chromium's native `pa...
使用说明 (SKILL.md)

html-ppt-to-pdf

把 HTML 格式幻灯片转成矢量 PDF。文字是可选中可搜索的 live text(不是栅格化图片),字体以 subset 形式嵌入 PDF,页面尺寸和角标与原 HTML 一致。

When to use

用户手上有一份 HTML 幻灯片要导出成 PDF,典型来源:

  • html-ppt skill 产物(固定 1920×1080,有 runtime.js 注入 .slide-number
  • frontend-slides / frontend-design skill 产物(100vh 自适应,用 IntersectionObserver 触发 .visible class 做 reveal 动画)
  • 任何手写/其他工具产的 HTML,只要用 \x3Csection class="slide"> 约定

过去踩过这些坑本 skill 都处理了:字体和原 HTML 不一致、页码 "101/22" 错乱、截图丢页/重页、frontend-slides 里非首屏 slide 内容全部隐形(.reveal 元素 opacity:0)。

不要用于:普通网页存 PDF(让用户用浏览器打印即可);Markdown 转 PDF(用 pandoc/typst);.pptx 转 PDF(用 pptx skill 或 LibreOffice)。

Input contract

  • 输入:HTML 文件绝对路径
  • HTML 约定:每张 slide 用 \x3Csection class="slide">;如果源 HTML 用别的 class(.deck-slide.page 等),传 --slide-selector
  • 默认尺寸:1920 × 1080。frontend-slides 类源码是 100vh 自适应,脚本会用 viewport 强制 1920×1080 排版(保证 16:9)
  • 输出:单个矢量 PDF 文件,文字可选中,字体 subset 嵌入

How to invoke

# 第一次用先装依赖(只需一次)
cd ~/.myagents/skills/html-ppt-to-pdf/scripts
npm install
npx playwright install chromium   # 仅作最后兜底

# 执行转换
node ~/.myagents/skills/html-ppt-to-pdf/scripts/html-to-pdf.mjs \x3Cinput.html> \x3Coutput.pdf>

# 自定义尺寸
node ~/.myagents/skills/html-ppt-to-pdf/scripts/html-to-pdf.mjs input.html out.pdf --width 1280 --height 720

强烈推荐系统装 Chrome 或 Edge。脚本默认自动用系统 Chrome/Edge 出 PDF——Playwright 自带的 Chromium(build 1208 实测)有 page.pdf() 绘制 bug:遇到 display:flex; flex-direction:column + 内联 opacity:0; transform:translateY() 的 reveal-card 结构时会静默丢内容(屏幕/截图正常,唯独 PDF 丢)。系统 Chrome 无此问题。若系统未装 Chrome/Edge,脚本会 fallback 到 bundled Chromium 并打警告。

Why this approach (critical)

不要走"截图合成 PDF"。那条路线(html-ppt/scripts/render.sh + ImageMagick 拼 PDF)有三个硬伤:

  1. PNG 把文字栅格化,字体信息丢失,放大即糊
  2. 逐页 hash 跳转 + 循环截图的时序 bug,经典丢首页/重尾页
  3. runtime.js 动态注入的页码与截图时序冲突

本 skill 用 Playwright 的 page.pdf(),由 Chromium 排版引擎一次性吐出多页矢量 PDF:

  • 字体:等 document.fonts.ready 再排版 → Chromium 把用到的字形 subset 嵌入 /FontFile2
  • 分页:注入 @page + page-break-after CSS → Chromium 原生分页,不存在循环
  • 页码:自动把 .slide-numberdata-current / data-total 修成正确值,解决 "101/22" 那种 DOM 硬写文本和 CSS ::before/::after 叠加的 bug
  • 排版差异适配:
    • deck 风格(html-ppt:所有 slide position: absolute; top: 0)→ 强制 position: static 把 slides 摊开
    • flow 风格(frontend-slides:height: 100vh)→ 用固定 px 尺寸覆盖 vh 单位
    • reveal 动画(frontend-slides 的 .reveal + IntersectionObserver 加 .visible)→ 强制给每张 slide 加 .visible class,并把 .revealopacity/transform 设为终态,避免非首屏内容隐形
    • 统一隐藏运行时 UI:.progress-bar.nav-dots.edit-toggle.edit-hotzone 等不进 PDF

Verification

跑完后必须验证(阿成踩过这些坑):

  • 页数 = HTML 里 \x3Csection class="slide"> 的数量,不多不少
  • 首页和末页和 HTML 一致
  • 用 Adobe Reader 打开,文字能选中能复制(证明矢量嵌入)
  • 页面尺寸正确(Acrobat → 文件属性 → 页面大小)
  • 每页的角标/页码都在

Troubleshooting

~/.myagents/skills/html-ppt-to-pdf/README.md

安全使用建议
This skill appears to do exactly what it says: convert HTML slides (section.slide convention) into vector PDFs using Playwright/Chromium. Before installing or running it, consider: 1) npm install + Playwright will download large browser binaries (expect ~100–300 MB); run in an environment where that is acceptable. 2) The script will read your input HTML and any local asset files it can access (including ~/.myagents/skills/html-ppt for remapped assets) and may load web fonts/resources over the network — if your HTML references remote resources you don't want fetched, host fonts locally or run offline. 3) If you are concerned about running third-party Node code, review scripts/html-to-pdf.mjs yourself or run it in a sandbox/container. 4) The skill requests no secrets or external endpoints and logs page errors/failed requests locally; still verify outputs (PDF contents, embedded fonts) before sharing. Overall, the footprint and behavior are proportional and coherent with the stated purpose.
功能分析
Type: OpenClaw Skill Name: html-ppt-to-pdf Version: 1.0.0 The skill is a legitimate utility designed to convert HTML slide decks into high-fidelity PDFs using Playwright and Chromium. The core logic in `scripts/html-to-pdf.mjs` focuses on resolving common rendering issues, such as un-stacking absolute-positioned slides, forcing visibility on reveal-based animations, and fixing slide numbering bugs. It includes a path-remapping feature to ensure assets from related skills are correctly resolved. No evidence of malicious intent, data exfiltration, or harmful prompt injection was found; all file and network operations are consistent with the stated purpose of PDF generation.
能力标签
cryptocan-make-purchases
能力评估
Purpose & Capability
Name/description match the provided code and SKILL.md. The script uses Playwright/Chromium to render HTML slides and applies many targeted CSS/JS fixes for known slide frameworks; the npm dependency on Playwright and pdf-lib is proportional to the task (browser-driven PDF generation and optional PDF post-processing).
Instruction Scope
Runtime instructions and the script stay within the conversion task: they load a local HTML file, adjust CSS/DOM to force print-friendly layout, and emit a PDF. The script reads the filesystem (input HTML, writes output PDF) and will attempt to load web fonts/resources referenced by the HTML (network). It also remaps asset paths that reference a local html-ppt install under ~/.myagents/skills/html-ppt — this is reasonable for the declared use but means the skill accesses files under the user's home directory.
Install Mechanism
There is no automatic install spec in the registry; SKILL.md instructs users to run npm install and npx playwright install chromium. That will download Playwright and (optionally) a Chromium binary (hundreds of MB). All package sources shown are standard npm registries/mirrors; no downloads from shorteners/personal servers are present.
Credentials
The skill declares no required credentials or sensitive env vars. It does read standard environment values (HOME or USERPROFILE) to find the user's skill directory and can use HTTPS_PROXY/HTTP_PROXY if set or passed on the CLI — this is justified for fetching remote fonts/assets and is documented in SKILL.md.
Persistence & Privilege
The skill is not always-enabled and does not request elevated or persistent platform privileges. It writes only the output PDF and may read local skill asset folders; it does not modify other skills' configs or system-wide settings.
如何使用
  1. 确保已安装 OpenClaw(本地或 Docker 部署)
  2. 在对话框中输入安装命令:/install html-ppt-to-pdf
  3. 安装完成后,直接呼叫该 Skill 的名称或使用 /html-ppt-to-pdf 触发
  4. 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
版本历史
v1.0.0
Initial release of html-ppt-to-pdf - Converts HTML slide decks using `<section class="slide">` into high-fidelity, vector-text PDFs. - Supports HTML from `html-ppt`, `frontend-slides`, `frontend-design`, or any custom source that follows the convention. - Ensures text remains selectable and fonts are subset-embedded; page size and page numbers match the original deck. - Automatically handles common issues like missing content, incorrect fonts, and page numbering bugs. - Not intended for ordinary web pages, Markdown, or `.pptx` files—use specialized tools for those cases.
元数据
Slug html-ppt-to-pdf
版本 1.0.0
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 1
常见问题

html-ppt-to-pdf 是什么?

Convert any HTML slide deck that uses the `<section class="slide">` convention into a high-fidelity, vector-text PDF using Playwright + Chromium's native `pa... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 118 次。

如何安装 html-ppt-to-pdf?

在 OpenClaw 或 Claude Code 对话框中运行命令「/install html-ppt-to-pdf」即可一键安装,无需额外配置。

html-ppt-to-pdf 是免费的吗?

是的,html-ppt-to-pdf 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。

html-ppt-to-pdf 支持哪些平台?

html-ppt-to-pdf 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。

谁开发了 html-ppt-to-pdf?

由 DTacheng(@dtacheng)开发并维护,当前版本 v1.0.0。

💬 留言讨论