幻灯片源
将 HTML 幻灯片甲板转换为 PPTX, PDF, 和 PNG 。 以 HTML + CSS 设计幻灯片,然后导出为本地 PowerPoint 格式的高纯度转换 .
如何运作
幻灯片源在无头 Chromium 浏览器中使 HTML (通过 Playwright) , 从 DOM 中提取每个可见元素—— 形状、 文本运行、 图像、 梯度 —— 并把它们重建为本地 OOXML 对象 .pptx 文档。 结果是一个真实的有可编辑文本的PowerPoint文件,而不是光栅化的图像.
所需资源
- 阿宝 页:1
- 剧作家铬( R)
bunx playwright install chromium(中文(简体) ) - 可选 : LibreOffice + Ghostscript (仅用于
--renderPPTX 验证)
安装
bun add @0-ai/slide-gen
CLI 使用情况
bunx slide-gen slides.html -o ./output
此生成 presentation.pptx, (中文(简体) ), presentation.pdf,以及 slide-*.png 输出目录中的文件.
选项
-o, --output-dir <dir> Output directory (default: ./output)
--no-pdf Skip PDF generation
--no-pptx Skip PPTX generation
--no-png Skip PNG screenshots
--render Render PPTX back to PNG via LibreOffice (for verification)
--skip-fonts Use previously cached fonts
--fonts-dir <dir> Custom fonts cache directory
API 使用情况
基于文件的管道
从磁盘读取 HTML, 将输出写入目录 :
import { convertHtmlToSlides } from "@0-ai/slide-gen";
const result = await convertHtmlToSlides("slides.html", {
outputDir: "./output",
onProgress: console.log,
});
console.log(result.pptxPath); // ./output/presentation.pptx
console.log(result.pdfPath); // ./output/presentation.pdf
console.log(result.pngPaths); // ["./output/slide-1.png", ...]
缓冲管
接受 HTML 为字符串, 以内存缓冲返回一切 —— 不需要输出目录 :
import { convertHtmlBuffers } from "@0-ai/slide-gen";
const result = await convertHtmlBuffers({
html: "<html>...</html>",
noPdf: true, // skip PDF
noPng: true, // skip PNGs
});
// result.pptxBuffer — Buffer containing the .pptx file
// result.pngBuffers — Buffer[] of slide screenshots
// result.slideData — extracted slide structure
低级 API
直接使用单个管道相:
import {
launchBrowser,
loadHtmlContent,
extractSlideData,
prepareFontsFromSlideData,
buildPptx,
generatePdfBuffer,
generateSlidePngBuffers,
closeBrowser,
} from "@0-ai/slide-gen";
HTML 幻灯片格式
每个幻灯片都是 <div class="slide"> 元素大小为 1920x1080px:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, initial-scale=1" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; }
.slide {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
font-family: 'Inter', sans-serif;
color: #fff;
background: #0a0a0a;
}
.slide + .slide { page-break-before: always; }
</style>
</head>
<body>
<div class="slide">
<h1 style="padding: 80px; font-size: 64px;">Hello, World</h1>
</div>
<div class="slide">
<h1 style="padding: 80px; font-size: 64px;">Slide Two</h1>
</div>
</body>
</html>
支助的CSS
| 特性 | 页:1 |
|---|---|
| 固体背景 | background-color 关于任何元素 |
| 线性和线性梯度 | linear-gradient(), (中文(简体) ), radial-gradient() |
| 弹性框和网格布局 | 通过 getBoundingClientRect() |
| 谷歌字体 | 所有重量(100-900)——自动下载并嵌入 |
| 边框 | 平面颜色和宽度(%% 1px) |
border-radius | 统一价值(不单价) |
| 不透明度 | 从祖先链中累积 |
| CSS 变量 | 提取前由浏览器解决 |
transform: rotate() | 仅旋转——无比例/比例/翻译 |
::before 编号 : ::after | 位置、 大小、 仅是背景( 无文本) |
| 字体样式 | 大小、 重量、 样式、 家庭、 颜色、 字母间距、 行高 |
| 文本格式化 | 文本转换、文本对齐 |
<img>,内置SVG | 升级和嵌入为PNG |
background-image: url() | 单一图像背景 |
writing-mode | vertical-rl编号 :vertical-lr |
数据属性
控制带有这些属性的转换行为 :
| 属性 | 数值 | 目的 |
|---|---|---|
data-sg-wrap | "true" 编号 : "false" | 明确的文本包装控制 |
data-sg-group | 任意字符串 | 分组文本运行到一个 PPTX 文本框 |
不支持( 沉默忽略)
暗影 过滤器 背景过滤器 剪辑路径 文字装饰 变换 rotate(),二次曲线梯度,多背景层,穿角边框-射线,位置布局相抵.
字体
Google 字体是自动下载的, 本地缓存( in) .slide-gen-fonts/),并被嵌入到PPTX文件中. 系统字体有效但只得到二进制粗体——没有重量变体.
使用 --skip-fonts 以重用缓存字体.
许可证
麻省理工学院