open-platform-logo开放平台
登录
免费注册

iFrame 方案

文
DOCMEE 官方团队 发布
探索 PPT + AI 的极限，为您提供卓越技术支持！
13472721242
business@metasigncloud.com

文多多 AiPPT 可以通过 iframe 与您的系统紧密结合，通过简单的一些步骤，就能将 Docmee 嵌入到您的业务系统中。

快速使用您的 TOKEN 来体验 iframe 嵌入的效果

通过 NPM 使用 （推荐）

安装我们提供的 SDK，即可引入我们的 UI

开源项目docmee/aippt-ui-iframe-v2 ↗中，提供了一个简单的事例，您可以参考
如果想要对接 V1 版本，您可以参考 docmee/aippt-ui-iframe ↗

  • TypeScript 支持

* ⚠️ 注意：【升级提醒】当您使用creator-v2页面时，如果你需要使用creatorData来从外部直接传入数据，会直接开始 PPT 生成，请注意。

如果您使用的是 JS，您可能无法使用CreatorType这个枚举类型，此次您只能传入代表任务类型的数字，具体的：

1.智能生成（主题、要求）
2.上传文件生成
3.上传思维导图生成
4.通过 word 精准转 ppt
5.通过网页链接生成
6.粘贴文本内容生成
7.Markdown 大纲生成

准备

  1. 下载我们提供的 SDK 文件

  2. 在您的页面中引入

初始化

您需要实例化我们提供的类 DocmeeUI 来嵌入我们的 UI

⚠️ 不要在 file 协议下运行，请启动一个 http 服务来运行！

接入代码示例

github： https://github.com/veasion/aippt-ui-iframe

gitee： https://gitee.com/veasion/aippt-ui-iframe

参数说明

以下参数都可以在new Docmee({...})时候传入：

token
类型string
必填
说明:

调用 API 创建接口 token 获取 token

示例:

sk_xxx

container
类型HTMLElement
必填
说明:

挂载 iframe 的容器

creatorVersion
类型'v1' | 'v2'
可选
说明:

创建PPT的版本选择

themeColor
类型string
可选
说明:

主题色

示例:

#4b39b8

page
类型'dashboard' | 'creator' | 'editor' | 'customTemplate'
可选
说明:

进入页面，'dashboard'表示文档列表页，'creator'生成 ppt 页面, 'customTemplate'表示进入自定义模版页面，'editor'表示编辑页面（pptId 必须同时传递）

示例:

dashboard

lang
类型'zh' | 'en' | 'jp' | 'de' | 'fr' | 'ko' | 'pt'
可选
说明:

语言(详见 国际化)

示例:

'zh'

pptId
类型string
必填
说明:

进入 editor 页面时编辑的 pptId，如果 page 为 editor 时，pptId 不能为空

示例:

-

animation
类型boolean
可选
说明:

进入 editor 页面时显示创建生成动画过程

示例:

-

background
类型string
可选
说明:

iframe 背景颜色，可填入颜色或者图片 url 地址

示例:

#f1f1f1

mode
类型'light' | 'dark'
可选
说明:

亮色，暗色模式

示例:

当前浏览器环境

isMobile
类型boolean
可选
说明:

移动端模式

示例:

false

backgroundSize
类型string
可选
说明:

iframe 背景大小 与 CSS 中的 background-size 语法相同

示例:

cover

padding
类型string
可选
说明:

内边距（也就是 css 的 padding，语法相同）

示例:

20px 10px 20px 10px

onMessage
类型function
可选
说明:

事件处理钩子 详见 事件类型

示例:

function (message) {}

creatorData
类型{subject: string, createNow?: boolean} | {text: string, createNow?: boolean}
可选
说明:

生成页面传递 内容 subject 与 text 二选其一； createNow 如果为 true表示直接开始大纲生成（仅当 page=creator）时生效

示例:

-

downloadButton
类型boolean | ['pptx', 'pdf']
可选
说明:

下载文件选项 返回 false 表示禁用下载，如果只想打开一种下载方式，可以传递数组['pptx']表示只允许下载为 pptx 格式

示例:

true

creatorMode
类型['topic', 'material']
可选
说明:

生成 PPT 方式，topic：主题生成，material：外部资料

示例:

['topic', 'material']

outlineExportFormat
类型'txt' | 'md'
可选
说明:

导出大纲的文件格式（注意：不管是 txt 还是 md 格式，内容都是按照 markdown 语法来导出的）

示例:

'md'

createCustomTemplateWhenEmpty
类型boolean
可选
说明:

控制自定义模版选择界面，若自为空时，是否需要显示“立即创建”按钮

示例:

false

hidePdfWatermark
类型boolean
可选
说明:

导出 PDF 文档隐藏文多多水印

示例:

false

createCustomTemplateWhenSelect
类型boolean
可选
说明:

控制自定义模版选择界面，是否显示“添加自定义模版”按钮，若设置为 true，则 createCustomTemplateWhenEmpty 参数无效

示例:

false

css
类型string
可选
说明:

注入 CSS 样式，可通过传递自定义 CSS 来更加深度地自定义文多多的样式，支持可访问的 URL 地址或直接传入 CSS 字符串，例如：#docmee_SdkContainer {background: white !important;}，或'https://abc.cn/style.css'

示例:

-

事件类型

iFrame 挂载完成

PPT 生成前触发 (用户点击“生成大纲”，以及选择完模版，点击“开始创作”时触发,通 过 subtype 区分)

该事件可以返回 true/false (也可以返回 异步 Promise<boolean>) 来决定用户是否能 够继续生成

自定义完整模版前触发

自定义模版完成触发

PPT 生成完毕扣费时触发

PPT 生成后触发

下载前触发

该事件可以返回 true/false 或 string (也可以返回 异步 Promise<boolean | string>) 来决定用户是否能够继续下载 PPT，或指定 ppt 文档名称，返回的名称需要 以.pptx结尾才表示重命名文件

用户信息

手动触发保存(仅用户点击触发)

错误

生成 PPT 方式修改

只要生成方式有变化就会触发

其他 API

以下方法都是 DocmeeUI 类 实例的成员，需要通过docmeeUI.来调用

  • docmeeUI.updateToken(newToken: string): void 更新用户 Token

  • docmeeUI.destroy(): void 卸载 iframe

  • docmeeUI.getInfo(): void 手动获取一次 用户信息，用户信息会在onMessage回调 中返回

  • docmeeUI.navigate(obj: {page: 'creator' | 'dashboard' | 'editor' | 'customTemplate', pptId?: string}): void 跳转页面, 同样地如果前往 editor 页面，pptId 是必须的

  • docmeeUI.sendMessage(message: {type: string, content: string}): void 控制 SDK 发送消息
  • docmeeUI.changeCreatorData(data: {subject: string, text: string}, createNow: boolean): void 在creator页面中修改输入框中的值

  • docmeeUI.updateTemplate(templateId: string) 外部指定更换模板，并刷新

  • docmeeUI.showTemplateDialog(type?: 'custom' | 'system') 弹出模板选择弹框, type: 'custom' or 'system' (default)

  • docmeeUI.getCurrentPptInfo() 返回 ppt 信息（在事件中返回，事件类型currentPptInfo）

国际化

为了应对多语种环境，文多多 AiPPT 支持国际化。

目前支持的语言列表有:

  • 中文 zh
  • 英文 en
  • 日本语 jp
  • 韩语 ko
  • 法语 fr
  • 德语 de
  • 葡萄牙语 pt

接口转发

如果你想对某些接口进行特殊处理，比如图片接口走你们自己的图库接口之类的扩展，或者 API 代理商 提供给用户 iframe 接入方式，都可以通过 nginx 进行接口转发实现。

示例：

假设你的服务器域名为 xxx.com

服务器端 nginx 配置如下：

使用 DocmeeUI 是指定代理相关参数：

2024 © 上海元符号智能科技有限公司 版权所有