【前端】ikun-pptx编辑器前瞻问题二： pptx的压缩包结构，以及xml正文树及对应元素介绍

文章目录

• PPTX文件本质：一个压缩包
• • 核心文件解析
  • • 1. 幻灯片内容文件 (ppt/slides/slideX.xml)
    • 2. 元素类型解析
    • • 文本框元素 (p:sp)
      • 图片元素 (p:pic)
  • 单位系统
  • 开发注意事项
  • 参考工具
  • pptx渲染路线图

PPTX文件本质：一个压缩包

PPTX文件实际上是一个遵循Open XML标准的ZIP压缩包，包含多个XML文件和其他资源。我们可以通过解压工具查看其内部结构：

pptx文件├── [Content_Types].xml├── _rels/├── docProps/│ ├── app.xml│ ├── core.xml│ └── thumbnail.jpeg└── ppt/ ├── presentation.xml ├── slides/ │ ├── slide1.xml │ ├── slide2.xml │ └── ... ├── slideLayouts/ ├── slideMasters/ ├── media/ # 存放图片等媒体资源 ├── theme/ └── _rels/

可以看到，每一页幻灯片是一个独立的xml文件
而图片，可能以链接

核心文件解析

1. 幻灯片内容文件 (ppt/slides/slideX.xml)

每个幻灯片对应一个XML文件，包含以下关键结构：

<p:sld> <p:cSld>  <p:spTree>  <p:sp>  <p:nvSpPr>  <p:spPr>  <p:txBody>  </p:sp> <p:pic>  <p:nvPicPr> <p:blipFill>  <p:spPr> </p:pic> </p:spTree> </p:cSld></p:sld>

2. 元素类型解析

文本框元素 (p:sp)

<p:sp> <p:nvSpPr> <p:cNvPr id=\"1\" name=\"TextBox 1\"/> <p:cNvSpPr/> </p:nvSpPr> <p:spPr>  <a:xfrm>  <a:off x=\"1524000\" y=\"1524000\"/> <a:ext cx=\"2743200\" cy=\"914400\"/> </a:xfrm> <a:prstGeom prst=\"rect\">  <a:avLst/> </a:prstGeom> </p:spPr> <p:txBody>  <a:bodyPr/> <a:p>  <a:r>  <a:rPr lang=\"zh-CN\" sz=\"1800\"/>  <a:t>Hello World</a:t>  </a:r> </a:p> </p:txBody></p:sp>

图片元素 (p:pic)

<p:pic> <p:nvPicPr> <p:cNvPr id=\"2\" name=\"Picture 1\"/> <p:cNvPicPr> <a:picLocks noChangeAspect=\"1\"/> </p:cNvPicPr> </p:nvPicPr> <p:blipFill>  <a:blip r:embed=\"rId1\"/>  <a:stretch> <a:fillRect/> </a:stretch> </p:blipFill> <p:spPr>  <a:xfrm> <a:off x=\"1524000\" y=\"1524000\"/> <a:ext cx=\"2743200\" cy=\"1828800\"/> </a:xfrm> <a:prstGeom prst=\"rect\"> <a:avLst/> </a:prstGeom> </p:spPr></p:pic>

单位系统

PPTX中使用EMU(English Metric Unit)作为基本单位：

• 1英寸 = 914400 EMU
• 1厘米 = 360000 EMU
• 1磅 = 12700 EMU

转换公式：

function emuToPx(emu, dpi = 96) { return Math.round((emu / 914400) * dpi);}

开发注意事项

1. 关系映射：所有资源引用都通过 ppt/_rels目录下的关系文件映射
2. 媒体资源：图片存储在 ppt/media目录，通过 r:embed引用
3. 样式继承：幻灯片会继承slideMaster和slideLayout中的样式
4. 命名空间：XML中使用大量命名空间前缀，解析时需注意

参考工具

1. Open XML SDK
2. PPTX.js
3. Office XML文档

下期预告：如何在前端实现PPTX的页面元素解析与渲染

pptx渲染路线图

在此，我们简单确定一个渲染路线图， 后续按照此顺序对 每一页的元素完成解析并进行还原度评估