好消息,终于可以在自己的项目中加入AIPPT的功能了。不用自己实现,直接调用API即可。
目前AIPPT相关的工具井喷般爆发,笔者也是测试了多款AIPPT生成工具。目前推荐文多多AiPPT,官网:文多多 AiPPT | 一键搞定PPT。最为关键的是,该工具在github上进行了开源:GitHub - veasion/aippt,很是良心。
日前,文多多AiPPT发布了开放平台,提供了API与UI接入两种方式,使得文多多AiPPT更加良心了。API的调用适合专业技术人员,UI接入可快速实现调用。文多多AiPPT的UI接入通过iframe方案实现,经过一些简单的步骤,就能将AiPPT加入到自己的业务系统中。
![](https://i-blog.csdnimg.cn/direct/4a1ad262d63142ef8d30137453bf2e3f.png)
文多多AiPPT的iframe方案官方代码:
<body>
<div id="container"></div>
<script>
const docmeeUI = new DocmeeUI({
token: 'sk_*****************', // 调用 createApiToken 接口获取的 token
container: document.querySelector('#container'), // 挂载 iframe 的容器
page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面
themeColor: '#a83aaf', // 主题色
background: 'linear-gradient(140deg, #ec81af, #af22ce)', // 背景色,支持颜色与图片url地址
padding: '40px', // 内边距(也就是css的padding,语法相同)
onMessage(message) {
console.log(message)
if (message.type === 'invalid-token') {
console.log('token 认证错误') // 在token失效时触发
}
if (message.type === 'beforeGenerate') {
const { subtype, fields } = message.data
if (subtype === 'outline') {
// 生成大纲前触发
console.log('即将生成ppt大纲', fields)
return true
} else if (subtype === 'ppt') {
// 生成ppt前触发
console.log('即将生成ppt', fields)
docmeeUI.sendMessage({
type: 'success',
content: '继续生成PPT',
})
return true
}
}
if (message.type === 'beforeDownload') {
return `PPT_${new Date().getTime()}.pptx`
}
},
})
</script>
</body>
需要引入官方的SDK文件,可在官网下载。
<head>
<script src="/docmee-ui-sdk-iframe.min.js"></script>
<head></head>
</head>
官方代码参数说明
参数 | 类型 | 是否必填 | 说明 | 例 |
---|---|---|---|---|
token | string | ✔︎ | 调用 API 创建接口 token 获取 token,提供给您的用户 | sk_xxxxx |
container | HTMLElement | ✔︎ | 挂载 iframe 的容器 | |
themeColor | string | ⨯ | 主题色 | #4b39b8 |
page | 'dashboard' | 'creator' | ⨯ | 进入页面,'dashboard'表示文档列表页,'creator'生成 ppt 页面 | dashboard |
background | string | ⨯ | iframe 背景颜色,可填入颜色或者图片 url 地址 | #f1f1f1 |
padding | string | ⨯ | 内边距(也就是 css 的 padding,语法相同) | 20px 10px 20px 10px |
onMessage | function | ⨯ | 事件处理钩子 详见 事件类型 | function (message) {} |
iframe挂载完成
{
type: 'mounted',
}
PPT生成前触发 (用户点击“生成大纲”,以及选择完模版,点击“开始创作”时触发,通 过subtype区分)
{
type: 'beforeGenerate',
data: {
subtype: 'outline', // "outline" 生成大纲前触发,"ppt"生成ppt前触发
fields: {} // 用户用于生成PPT的参数
}
}
该事件可以返回 true/false (也可以返回异步 Promise<boolean>) 来决定用户是否能够继续生成。
PPT生成后触发
{
type: 'afterGenerate',
data: {
id: 'xxxxxx' // ppt id
}
}
下载前出发(需返回布尔值或字符串(文件名))
{
type: 'beforeDownload',
data: {
id: 'xxxxxx' // ppt id
}
}
该事件可以返回 true/false 或 string (也可以返回异步Promise<boolean | string>) 来决定用户是否能够继续下载 PPT,或指定ppt文档名称,返回的名称需要以.pptx
结尾才表示重命名文件。
用户信息
{
type: 'user-info',
data: {
"uid": null, // 用户 id
"availableCount": 0, // 可用生成次数
"usedCount": 0 // 已使用的次数
}
}
错误
{
type: 'error',
data: {
code: 88, // 次数用完了
message:"您的次数已用完,请开通会员"
}
}
HTML完整测试代码,注意需要去文多多AiPPT官网申请token
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./docmee-ui-sdk-iframe.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#container {
width: 100vh;
height: 100vh;
border: 1px solid red;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const docmeeUI = new DocmeeUI({
token: '*****************', // 调用 createApiToken 接口获取的 token
container: document.querySelector('#container'), // 挂载 iframe 的容器
page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面
themeColor: '#a83aaf', // 主题色
background: 'linear-gradient(140deg, #ec81af, #af22ce)', // 背景色,支持颜色与图片url地址
padding: '40px', // 内边距(也就是css的padding,语法相同)
onMessage(message) {
console.log(message)
if (message.type === 'invalid-token') {
console.log('token 认证错误') // 在token失效时触发
}
if (message.type === 'beforeGenerate') {
const { subtype, fields } = message.data
if (subtype === 'outline') {
// 生成大纲前触发
console.log('即将生成ppt大纲', fields)
return true
} else if (subtype === 'ppt') {
// 生成ppt前触发
console.log('即将生成ppt', fields)
docmeeUI.sendMessage({
type: 'success',
content: '继续生成PPT',
})
return true
}
}
if (message.type === 'beforeDownload') {
return `PPT_${new Date().getTime()}.pptx`
}
},
})
</script>
</body>
</html>
至此,即可快速将文多多AiPPT嵌入到自己的项目里了。小伙伴们,赶紧去试试吧,很好用哦!
![](https://i-blog.csdnimg.cn/direct/68ed7f21a360416c87c294d5d3b7dfef.png)