@microlee666/dom-to-pptx 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/.prettierrc +6 -0
  2. package/CHANGELOG.md +96 -0
  3. package/CONTRIBUTING.md +72 -0
  4. package/LICENSE +21 -0
  5. package/Readme.md +310 -0
  6. package/SUPPORTED.md +50 -0
  7. package/USAGE_CN.md +324 -0
  8. package/cli/.claude/settings.local.json +8 -0
  9. package/cli/.dockerignore +8 -0
  10. package/cli/Dockerfile +54 -0
  11. package/cli/Dockerfile.cn +22 -0
  12. package/cli/HTML_PPT_SPEC.md +360 -0
  13. package/cli/README.md +196 -0
  14. package/cli/docker-compose.yml +20 -0
  15. package/cli/dom-to-pptx.bundle.js +64731 -0
  16. package/cli/html2pptx.js +214 -0
  17. package/cli/output.pptx +1 -0
  18. package/cli/package-lock.json +1171 -0
  19. package/cli/package.json +20 -0
  20. package/cli/server.js +808 -0
  21. package/dist/dom-to-pptx.bundle.js +64917 -0
  22. package/dist/dom-to-pptx.cjs +2735 -0
  23. package/dist/dom-to-pptx.cjs.map +1 -0
  24. package/dist/dom-to-pptx.mjs +2705 -0
  25. package/dist/dom-to-pptx.mjs.map +1 -0
  26. package/eslint.config.js +17 -0
  27. package/package.json +86 -0
  28. package/rollup.config.js +96 -0
  29. package/src/font-embedder.js +163 -0
  30. package/src/font-utils.js +32 -0
  31. package/src/image-processor.js +118 -0
  32. package/src/index.js +1376 -0
  33. package/src/utils.js +1032 -0
package/cli/HTML_PPT_SPEC.md ADDED
@@ -0,0 +1,360 @@
1
+ # HTML 格式 PPT 规范与约束
2
+
3
+ 本文档详细说明使用 dom-to-pptx 库时，HTML 需要遵循的规范和约束。
4
+
5
+ ---
6
+
7
+ ## 一、幻灯片容器结构
8
+
9
+ ### 1.1 基本要求
10
+
11
+ ```html
12
+ <div class="slide" style="
13
+ width: 960px; /* 固定宽度 */
14
+ height: 540px; /* 固定高度 */
15
+ position: relative;
16
+ overflow: hidden;
17
+ ">
18
+ <!-- 幻灯片内容 -->
19
+ </div>
20
+ ```
21
+
22
+ ### 1.2 尺寸规范
23
+
24
+ | 比例 | 推荐尺寸 | 说明 |
25
+ |------|---------|------|
26
+ | 16:9 | 1920×1080 | 高清，适合大屏演示 |
27
+ | 16:9 | 960×540 | 标准，平衡性能与清晰度 |
28
+ | 4:3 | 1024×768 | 传统比例 |
29
+
30
+ > **重要**: 必须使用固定像素尺寸，不能使用百分比或视口单位（vw/vh）
31
+
32
+ ### 1.3 多幻灯片结构
33
+
34
+ ```html
35
+ <body>
36
+ <div class="slide">第一页</div>
37
+ <div class="slide">第二页</div>
38
+ <div class="slide">第三页</div>
39
+ </body>
40
+ ```
41
+
42
+ ---
43
+
44
+ ## 二、图片资源约束
45
+
46
+ ### 2.1 URL 要求
47
+
48
+ ```html
49
+ <!-- ✅ 正确：完整 HTTPS URL -->
50
+ <img src="https://images.unsplash.com/photo-xxx" />
51
+
52
+ <!-- ❌ 错误：相对路径 -->
53
+ <img src="./images/photo.jpg" />
54
+
55
+ <!-- ❌ 错误：无协议 URL -->
56
+ <img src="//example.com/image.jpg" />
57
+ ```
58
+
59
+ ### 2.2 CORS 设置
60
+
61
+ ```html
62
+ <!-- 必须添加 crossorigin 属性 -->
63
+ <img crossorigin="anonymous" src="https://example.com/image.jpg" />
64
+ ```
65
+
66
+ ### 2.3 背景图片
67
+
68
+ ```css
69
+ /* ✅ 正确 */
70
+ .element {
71
+ background-image: url('https://example.com/bg.jpg');
72
+ }
73
+
74
+ /* ❌ 错误 */
75
+ .element {
76
+ background-image: url('./bg.jpg');
77
+ }
78
+ ```
79
+
80
+ ---
81
+
82
+ ## 三、字体约束
83
+
84
+ ### 3.1 Web 字体引入
85
+
86
+ ```html
87
+ <!-- Google Fonts 需添加 crossorigin -->
88
+ <link
89
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
90
+ rel="stylesheet"
91
+ crossorigin="anonymous"
92
+ />
93
+ ```
94
+
95
+ ### 3.2 自定义字体
96
+
97
+ ```css
98
+ @font-face {
99
+ font-family: 'CustomFont';
100
+ src: url('https://example.com/fonts/custom.woff2') format('woff2');
101
+ /* 字体文件必须支持 CORS */
102
+ }
103
+ ```
104
+
105
+ ### 3.3 字体回退策略
106
+
107
+ ```css
108
+ .text {
109
+ /* 推荐：提供多个回退字体 */
110
+ font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
111
+ }
112
+ ```
113
+
114
+ ---
115
+
116
+ ## 四、CSS 样式支持
117
+
118
+ ### 4.1 完全支持的样式
119
+
120
+ | 类别 | 属性 | 示例 |
121
+ |------|------|------|
122
+ | **背景色** | `background-color` | `#fff`, `rgba(0,0,0,0.5)`, `oklch(...)` |
123
+ | **渐变** | `linear-gradient` | `linear-gradient(135deg, #667eea, #764ba2)` |
124
+ | **边框** | `border` | `1px solid #ccc` |
125
+ | **圆角** | `border-radius` | `12px`, `50%`, `10px 20px 30px 40px` |
126
+ | **阴影** | `box-shadow` | `0 4px 20px rgba(0,0,0,0.15)` |
127
+ | **透明度** | `opacity` | `0.8` |
128
+ | **旋转** | `transform: rotate()` | `rotate(45deg)` |
129
+ | **模糊** | `filter: blur()` | `blur(10px)` |
130
+
131
+ ### 4.2 文本样式
132
+
133
+ | 属性 | 支持 | 说明 |
134
+ |------|------|------|
135
+ | `color` | ✅ | 支持所有颜色格式 |
136
+ | `font-size` | ✅ | 自动转换为磅值 |
137
+ | `font-weight` | ✅ | ≥600 视为粗体 |
138
+ | `font-style` | ✅ | italic 支持 |
139
+ | `text-align` | ✅ | left/center/right |
140
+ | `line-height` | ✅ | 转换为行间距 |
141
+ | `text-decoration` | ✅ | underline 支持 |
142
+ | `text-transform` | ✅ | uppercase/lowercase |
143
+
144
+ ### 4.3 不支持的样式
145
+
146
+ | 样式 | 状态 | 替代方案 |
147
+ |------|------|---------|
148
+ | `backdrop-filter: blur()` | ❌ | 使用半透明背景色 |
149
+ | `transform: scale()` | ❌ | 直接设置元素尺寸 |
150
+ | `transform: translate()` | ❌ | 使用 position 定位 |
151
+ | `transform: skew()` | ❌ | 无替代 |
152
+ | CSS 动画 | ❌ | 只捕获静态状态 |
153
+ | CSS 过渡 | ❌ | 只捕获静态状态 |
154
+ | `radial-gradient` | ⚠️ | 建议使用 linear-gradient |
155
+ | `conic-gradient` | ❌ | 使用 linear-gradient |
156
+ | `text-shadow` | ⚠️ | 有限支持 |
157
+ | `mix-blend-mode` | ❌ | 无替代 |
158
+
159
+ ---
160
+
161
+ ## 五、布局约束
162
+
163
+ ### 5.1 推荐使用
164
+
165
+ ```css
166
+ /* ✅ 绝对定位（最可靠） */
167
+ .element {
168
+ position: absolute;
169
+ top: 100px;
170
+ left: 50px;
171
+ }
172
+
173
+ /* ✅ Flexbox（库会读取计算后位置） */
174
+ .container {
175
+ display: flex;
176
+ justify-content: center;
177
+ align-items: center;
178
+ }
179
+
180
+ /* ✅ Grid（库会读取计算后位置） */
181
+ .grid {
182
+ display: grid;
183
+ grid-template-columns: 1fr 1fr;
184
+ }
185
+ ```
186
+
187
+ ### 5.2 注意事项
188
+
189
+ - 库不直接解析 Flexbox/Grid 定义
190
+ - 而是测量每个元素的**最终计算位置**
191
+ - 然后在 PPTX 中使用绝对定位还原
192
+
193
+ ---
194
+
195
+ ## 六、支持的 HTML 元素
196
+
197
+ ### 6.1 完全支持
198
+
199
+ | 元素 | 转换方式 |
200
+ |------|---------|
201
+ | `div`, `section`, `article` | 矩形形状 |
202
+ | `span`, `p`, `h1-h6` | 文本框 |
203
+ | `img` | 图片对象 |
204
+ | `svg` | 转 PNG 后插入 |
205
+ | `canvas` | 截图后插入 |
206
+ | `table`, `tr`, `td`, `th` | 原生表格 |
207
+ | `ul`, `ol`, `li` | 原生列表 |
208
+ | `a`, `button` | 文本/形状 |
209
+
210
+ ### 6.2 有限支持
211
+
212
+ | 元素 | 限制 |
213
+ |------|------|
214
+ | 嵌套列表 | 可能被扁平化 |
215
+ | `input`, `textarea` | 仅提取文本值 |
216
+ | `video`, `audio` | 不支持 |
217
+ | `iframe` | 不支持 |
218
+
219
+ ---
220
+
221
+ ## 七、完整示例模板
222
+
223
+ ```html
224
+ <!DOCTYPE html>
225
+ <html>
226
+ <head>
227
+ <meta charset="UTF-8">
228
+ <link
229
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
230
+ rel="stylesheet"
231
+ crossorigin="anonymous"
232
+ />
233
+ <style>
234
+ * { margin: 0; padding: 0; box-sizing: border-box; }
235
+
236
+ .slide {
237
+ width: 960px;
238
+ height: 540px;
239
+ position: relative;
240
+ overflow: hidden;
241
+ font-family: 'Inter', sans-serif;
242
+ }
243
+
244
+ /* 幻灯片 1：渐变背景 */
245
+ .slide-1 {
246
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
247
+ padding: 60px;
248
+ }
249
+
250
+ .slide-1 h1 {
251
+ color: white;
252
+ font-size: 48px;
253
+ font-weight: 700;
254
+ }
255
+
256
+ .slide-1 p {
257
+ color: rgba(255, 255, 255, 0.9);
258
+ font-size: 24px;
259
+ margin-top: 20px;
260
+ }
261
+
262
+ /* 卡片样式 */
263
+ .card {
264
+ position: absolute;
265
+ background: white;
266
+ border-radius: 12px;
267
+ padding: 24px;
268
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
269
+ }
270
+ </style>
271
+ </head>
272
+ <body>
273
+ <!-- 幻灯片 1 -->
274
+ <div class="slide slide-1">
275
+ <h1>演示标题</h1>
276
+ <p>这是一个符合规范的 HTML PPT 示例</p>
277
+
278
+ <div class="card" style="bottom: 60px; left: 60px; width: 380px;">
279
+ <h3 style="font-size: 20px; color: #333;">特性一</h3>
280
+ <p style="font-size: 14px; color: #666; margin-top: 8px;">
281
+ 支持渐变背景、圆角、阴影等现代 CSS 特性
282
+ </p>
283
+ </div>
284
+
285
+ <div class="card" style="bottom: 60px; right: 60px; width: 380px;">
286
+ <h3 style="font-size: 20px; color: #333;">特性二</h3>
287
+ <p style="font-size: 14px; color: #666; margin-top: 8px;">
288
+ 高保真还原，自动嵌入字体
289
+ </p>
290
+ </div>
291
+
292
+ <img
293
+ crossorigin="anonymous"
294
+ src="https://images.unsplash.com/photo-1557683316-973673baf926?w=200"
295
+ style="position: absolute; top: 60px; right: 60px; width: 120px; border-radius: 8px;"
296
+ />
297
+ </div>
298
+
299
+ <!-- 幻灯片 2 -->
300
+ <div class="slide" style="background: #f5f5f5; padding: 60px;">
301
+ <h2 style="font-size: 36px; color: #333;">数据展示</h2>
302
+
303
+ <table style="
304
+ margin-top: 40px;
305
+ width: 100%;
306
+ border-collapse: collapse;
307
+ background: white;
308
+ border-radius: 8px;
309
+ overflow: hidden;
310
+ ">
311
+ <tr style="background: #667eea; color: white;">
312
+ <th style="padding: 16px; text-align: left;">项目</th>
313
+ <th style="padding: 16px; text-align: left;">状态</th>
314
+ <th style="padding: 16px; text-align: left;">进度</th>
315
+ </tr>
316
+ <tr>
317
+ <td style="padding: 16px; border-bottom: 1px solid #eee;">任务 A</td>
318
+ <td style="padding: 16px; border-bottom: 1px solid #eee;">进行中</td>
319
+ <td style="padding: 16px; border-bottom: 1px solid #eee;">75%</td>
320
+ </tr>
321
+ <tr>
322
+ <td style="padding: 16px;">任务 B</td>
323
+ <td style="padding: 16px;">已完成</td>
324
+ <td style="padding: 16px;">100%</td>
325
+ </tr>
326
+ </table>
327
+ </div>
328
+ </body>
329
+ </html>
330
+ ```
331
+
332
+ ---
333
+
334
+ ## 八、检查清单
335
+
336
+ 在转换前，请确认：
337
+
338
+ - [ ] 幻灯片容器使用固定像素尺寸
339
+ - [ ] 所有图片使用完整 HTTPS URL
340
+ - [ ] 图片元素添加 `crossorigin="anonymous"`
341
+ - [ ] Web 字体链接添加 `crossorigin="anonymous"`
342
+ - [ ] 未使用不支持的 CSS 属性（动画、scale、translate 等）
343
+ - [ ] 未使用相对路径引用资源
344
+ - [ ] 幻灯片选择器与 CLI 参数匹配（默认 `.slide`）
345
+
346
+ ---
347
+
348
+ ## 九、常见问题
349
+
350
+ ### Q: 为什么图片显示为空白？
351
+ A: 检查图片 URL 是否完整（https://）以及是否添加了 `crossorigin="anonymous"`
352
+
353
+ ### Q: 为什么字体没有正确显示？
354
+ A: 确保字体 CSS 链接添加了 `crossorigin` 属性，且字体服务器支持 CORS
355
+
356
+ ### Q: 为什么元素位置有偏差？
357
+ A: 避免使用 `transform: translate()`，改用 `position` + `top/left/right/bottom`
358
+
359
+ ### Q: 为什么动画效果丢失？
360
+ A: 库只捕获静态状态，CSS 动画和过渡不会被转换
package/cli/README.md ADDED
@@ -0,0 +1,196 @@
1
+ # dom-to-pptx CLI
2
+
3
+ 在 Linux/Mac 服务器上将 HTML 文件转换为 PowerPoint (PPTX) 的命令行工具。
4
+
5
+ ## 原理
6
+
7
+ 使用 Puppeteer（无头 Chrome）加载 HTML，然后调用 dom-to-pptx 库进行转换。
8
+
9
+ ## 安装
10
+
11
+ ```bash
12
+ cd cli
13
+ npm install
14
+ ```
15
+
16
+ ### Linux 服务器额外依赖
17
+
18
+ 在 Ubuntu/Debian 上需要安装 Chrome 依赖：
19
+
20
+ ```bash
21
+ sudo apt-get update
22
+ sudo apt-get install -y \
23
+ ca-certificates \
24
+ fonts-liberation \
25
+ libasound2 \
26
+ libatk-bridge2.0-0 \
27
+ libatk1.0-0 \
28
+ libcups2 \
29
+ libdbus-1-3 \
30
+ libdrm2 \
31
+ libgbm1 \
32
+ libgtk-3-0 \
33
+ libnspr4 \
34
+ libnss3 \
35
+ libxcomposite1 \
36
+ libxdamage1 \
37
+ libxfixes3 \
38
+ libxkbcommon0 \
39
+ libxrandr2 \
40
+ xdg-utils \
41
+ wget
42
+ ```
43
+
44
+ 或使用 Docker（见下方）。
45
+
46
+ ## 使用方法
47
+
48
+ ### 基本用法
49
+
50
+ ```bash
51
+ # 转换本地 HTML 文件
52
+ node html2pptx.js slide.html
53
+
54
+ # 指定输出文件名
55
+ node html2pptx.js slide.html output.pptx
56
+
57
+ # 转换网页 URL
58
+ node html2pptx.js https://example.com/slide.html
59
+
60
+ # 指定幻灯片选择器
61
+ node html2pptx.js slide.html -s "#my-slide"
62
+
63
+ # 指定视口尺寸
64
+ node html2pptx.js slide.html -w 1920 --height 1080
65
+ ```
66
+
67
+ ### 命令行参数
68
+
69
+ | 参数 | 说明 | 默认值 |
70
+ |------|------|--------|
71
+ | `input` | 输入 HTML 文件或 URL | (必填) |
72
+ | `output` | 输出 PPTX 文件路径 | `<input>.pptx` |
73
+ | `-s, --selector` | 幻灯片元素选择器 | `.slide` |
74
+ | `-w, --width` | 视口宽度 | `1920` |
75
+ | `--height` | 视口高度 | `1080` |
76
+
77
+ ## HTML 文件要求
78
+
79
+ 1. 幻灯片容器需要有 `class="slide"` 或指定的选择器
80
+ 2. 使用固定尺寸（推荐 1920x1080 或 960x540）
81
+ 3. 图片使用完整 URL（不能用相对路径）
82
+
83
+ 示例 HTML：
84
+
85
+ ```html
86
+ <!DOCTYPE html>
87
+ <html>
88
+ <head>
89
+ <style>
90
+ .slide {
91
+ width: 960px;
92
+ height: 540px;
93
+ background: linear-gradient(135deg, #667eea, #764ba2);
94
+ padding: 60px;
95
+ font-family: Arial, sans-serif;
96
+ }
97
+ h1 { color: white; font-size: 48px; }
98
+ </style>
99
+ </head>
100
+ <body>
101
+ <div class="slide">
102
+ <h1>Hello World</h1>
103
+ </div>
104
+ </body>
105
+ </html>
106
+ ```
107
+
108
+ ## Docker 使用
109
+
110
+ 如果不想安装 Chrome 依赖，可以使用 Docker：
111
+
112
+ ```dockerfile
113
+ FROM node:18-slim
114
+
115
+ # 安装 Chrome 依赖
116
+ RUN apt-get update && apt-get install -y \
117
+ ca-certificates \
118
+ fonts-liberation \
119
+ libasound2 \
120
+ libatk-bridge2.0-0 \
121
+ libatk1.0-0 \
122
+ libcups2 \
123
+ libdbus-1-3 \
124
+ libdrm2 \
125
+ libgbm1 \
126
+ libgtk-3-0 \
127
+ libnspr4 \
128
+ libnss3 \
129
+ libxcomposite1 \
130
+ libxdamage1 \
131
+ libxfixes3 \
132
+ libxkbcommon0 \
133
+ libxrandr2 \
134
+ xdg-utils \
135
+ wget \
136
+ && rm -rf /var/lib/apt/lists/*
137
+
138
+ WORKDIR /app
139
+ COPY package.json html2pptx.js ./
140
+ RUN npm install
141
+
142
+ ENTRYPOINT ["node", "html2pptx.js"]
143
+ ```
144
+
145
+ 构建和使用：
146
+
147
+ ```bash
148
+ # 构建镜像
149
+ docker build -t html2pptx .
150
+
151
+ # 转换文件（挂载当前目录）
152
+ docker run --rm -v $(pwd):/data html2pptx /data/slide.html /data/output.pptx
153
+ ```
154
+
155
+ ## 批量转换
156
+
157
+ ```bash
158
+ # 转换目录下所有 HTML 文件
159
+ for f in *.html; do
160
+ node html2pptx.js "$f" "${f%.html}.pptx"
161
+ done
162
+ ```
163
+
164
+ ## 常见问题
165
+
166
+ ### 1. 启动失败：缺少依赖
167
+
168
+ ```
169
+ Error: Failed to launch the browser process
170
+ ```
171
+
172
+ 解决：安装 Chrome 依赖（见上方 Linux 安装说明）
173
+
174
+ ### 2. 图片未显示
175
+
176
+ 原因：图片使用了相对路径或无法访问
177
+
178
+ 解决：使用完整的 https:// URL
179
+
180
+ ### 3. 字体显示异常
181
+
182
+ 原因：服务器上没有安装对应字体
183
+
184
+ 解决：
185
+ - 使用 Web 字体（Google Fonts）
186
+ - 或在服务器上安装字体
187
+
188
+ ### 4. 转换超时
189
+
190
+ 原因：页面加载慢或网络问题
191
+
192
+ 解决：增加超时时间（修改代码中的 timeout 参数）
193
+
194
+ ## License
195
+
196
+ MIT
package/cli/docker-compose.yml ADDED
@@ -0,0 +1,20 @@
1
+ services:
2
+ dom-to-pptx:
3
+ build: .
4
+ ports:
5
+ - "15000:3000"
6
+ environment:
7
+ - PORT=3000
8
+ - POOL_MAX=5
9
+ deploy:
10
+ resources:
11
+ limits:
12
+ memory: 2G
13
+ reservations:
14
+ memory: 512M
15
+ restart: unless-stopped
16
+ logging:
17
+ driver: json-file
18
+ options:
19
+ max-size: "10m"
20
+ max-file: "3"