Office Open
PPTX

图片

嵌入图片、设置幻灯片背景以及在形状上使用图片填充

@office-open/pptx 支持将图片嵌入幻灯片、设置背景图片以及将图片用作形状填充。

data 字段接受原始字节（Uint8Array、ArrayBuffer、Buffer），也支持 base64 data URL（如 data:image/png;base64,...）。在 JSON 或浏览器环境中没有磁盘文件时，使用 data URL 最为方便。

嵌入图片

import { generatePresentation } from "@office-open/pptx";

{
  "slides": [
    {
      "children": [
        {
          "picture": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "10.6cm",
            "height": "7.9cm",
            "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoCAIAAABIUN0GAAAGFklEQVR4nO3OMQ3AQBAEseOPJwDD4rcYSwbgu/sAgOf2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAnB/XZ/UJD/Bi1wAAAABJRU5ErkJggg==",
            "type": "png"
          }
        }
      ]
    }
  ]
}

从 URL 加载图片（浏览器）

import { generatePresentation } from "@office-open/pptx";
import * as fs from "node:fs";

const response = await fetch("https://example.com/image.png");
const arrayBuffer = await response.arrayBuffer();
const data = new Uint8Array(arrayBuffer);

// 在 generatePresentation 中使用：
generatePresentation({
  slides: [
    {
      children: [
        {
          picture: {
            x: "1.3cm",
            y: "1.3cm",
            width: "13.2cm",
            height: "7.9cm",
            data,
            type: "png",
          },
        },
      ],
    },
  ],
});

支持的图片类型

类型扩展名type 值
JPEG.jpg / .jpeg"jpg"
PNG.png"png"
GIF.gif"gif"
BMP.bmp"bmp"
EMF.emf"emf"
WMF.wmf"wmf"

幻灯片背景图片

为整张幻灯片设置背景图片：

{
  "slides": [
    {
      "background": {
        "fill": {
          "type": "blip",
          "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
          "imageType": "png"
        }
      },
      "children": []
    }
  ]
}

纯色背景

{
  "slides": [
    {
      "background": { "fill": "1F4E79" },
      "children": []
    }
  ]
}

渐变背景

{
  "slides": [
    {
      "background": {
        "fill": {
          "type": "gradient",
          "stops": [
            { "position": 0, "color": "0D47A1" },
            { "position": 100, "color": "42A5F5" }
          ],
          "angle": 45
        }
      },
      "children": []
    }
  ]
}

形状上的图片填充（Blip Fill）

将图片用作任何形状的填充：

{
  "slides": [
    {
      "children": [
        {
          "shape": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "15.9cm",
            "height": "10.6cm",
            "geometry": "roundRect",
            "fill": {
              "type": "blip",
              "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
              "imageType": "png"
            },
            "textBody": { "text": "Text over image fill" }
          }
        }
      ]
    }
  ]
}

Picture 选项

| 属性 | 类型 | 说明 | | -------- | ---------------------------------------------------- | ---------------------------------- | -------- | | x | number | UniversalMeasure | 左侧位置 | | y | number | UniversalMeasure | 顶部位置 | | width | number | UniversalMeasure | 宽度 | | height | number | UniversalMeasure | 高度 | | data | Uint8Array \| ArrayBuffer \| string (data URL) | 图片数据（字节或 base64 data URL） | | type | "png" \| "jpg" \| "gif" \| "bmp" \| "emf" \| "wmf" | 图片格式 | | name | string | 显示名称 |

表格

创建带合并单元格、自定义样式和格式化内容的表格

图表

在演示文稿中创建图表 — 柱状图、折线图、饼图、圆环图、雷达图、气泡图等

Copyright © 2026