【前端】ikun-pptx编辑器前瞻问题三： pptx的图片如何提取，并在前端渲染。

文章目录

• • pptx中的图片提取的一般步骤
  • rel 映射关系例子
  • 图片在幻灯片中的引用形式
  • pptx树状目录展示

pptx中的图片提取的一般步骤

以第一页幻灯片为例，需要下列步骤：

1. 在slide1.xml中找到图片ID
2. 在 slide1.xml.rels 中找到第一页幻灯片的所有映射关系（rid -> 文件）
3. 整理出映射集合 map。
4. 根据id读取文件流， 转换为base64编码
5. 在<img标签中通过base64渲染出图片。

可以看出这个步骤其实挺复杂了，cursor已经乱写代码导致图片提取不正确， 所以自己慢慢修正吧。

rel 映射关系例子

<Relationships xmlns=\"http://schemas.openxmlformats.org/package/2006/relationships\"><Relationship Id=\"rId1\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout\" Target=\"../slideLayouts/slideLayout1.xml\"/><Relationship Id=\"rId2\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/image\" Target=\"../media/image3.png\"/><Relationship Id=\"rId3\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/image\" Target=\"../media/image4.png\"/><Relationship Id=\"rId4\" Type=\"http://schemas.openxmlformats.org/officeDocument/2006/relationships/image\" Target=\"../media/image2.png\"/></Relationships>

图片在幻灯片中的引用形式

pptx树状目录展示