文多多 DocmeeiFrame 方案
文多多 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 大纲生成
准备
-
下载我们提供的 SDK 文件
-
在您的页面中引入
初始化
您需要实例化我们提供的类 DocmeeUI 来嵌入我们的 UI
⚠️ 不要在 file 协议下运行，请启动一个 http 服务来运行！
接入代码示例
github： https://github.com/veasion/aippt-ui-iframe
gitee： https://gitee.com/veasion/aippt-ui-iframe
参数说明
| 参数名称 | 类型 | 必填 | 说明 | 例 |
|---|---|---|---|---|
token | string | ✔︎ | 调用 API 创建接口 token 获取 token | sk_xxx |
container | HTMLElement | ✔︎ | 挂载 iframe 的容器 | |
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 是指定代理相关参数：