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

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 Worlda: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渲染路线图

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