文章目錄
- 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"/> <!-- 引用關系ID --><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);
}
開發注意事項
- 關系映射：所有資源引用都通過
ppt/_rels目錄下的關系文件映射 - 媒體資源：圖片存儲在
ppt/media目錄，通過r:embed引用 - 樣式繼承：幻燈片會繼承slideMaster和slideLayout中的樣式
- 命名空間：XML中使用大量命名空間前綴，解析時需注意
參考工具
- Open XML SDK
- PPTX.js
- Office XML文檔
下期預告：如何在前端實現PPTX的頁面元素解析與渲染
pptx渲染路線圖
在此，我們簡單確定一個渲染路線圖， 后續按照此順序對 每一頁的元素完成解析并進行還原度評估
