-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo2.html
226 lines (220 loc) · 8.4 KB
/
demo2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>文多多 AiPPT</title>
<script src="static/docmee-ui-sdk-iframe.min.js"></script>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
.input_div {
padding: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#input_text, #input_file, #input_dataUrl, #input_outline {
display: none;
}
#container {
display: none;
width: calc(100% - 50px);
height: calc(100% - 100px);
margin: 0 auto;
padding: 0;
border-radius: 12px;
box-shadow: 0 0 12px rgba(120, 120, 120, 0.3);
overflow: hidden;
background: linear-gradient(-157deg, #f57bb0, #867dea);
color: white;
}
</style>
</head>
<body>
<div style="text-align: center;padding: 5px;font-size: 14px">
<a href="/">返回</a>
</div>
<!-- 通过代码控制PPT创建 -->
<div class="input_div">
<select id="selectType" style="margin-right: 8px" onchange="changeSelectType()">
<option value="subject">根据主题</option>
<option value="text">根据内容</option>
<option value="file">根据文件</option>
<option value="dataUrl">根据文件链接</option>
<option value="outline">导入大纲</option>
</select>
<input id="input_subject" type="text" placeholder="PPT主题" />
<textarea id="input_text" placeholder="请粘贴文本内容" rows="5" cols="50" maxlength="6000"></textarea>
<input id="input_file" type="file" placeholder="请选择文件" accept=".doc, .docx, .xls, .xlsx, .pdf, .ppt, .pptx, .txt, .md" />
<input id="input_dataUrl" type="text" placeholder="文件链接（公网可访问）" style="width:220px" />
<input id="input_outline" type="file" placeholder="请选择文件" accept=".md, .doc, .docx, .xmind, .mm" />
<button style="margin-left: 8px" onclick="generate()">生成PPT</button>
</div>
<!-- 挂载iframe容器 -->
<div id="container"></div>
</body>
<script>
if (location.protocol == 'file:') {
alert('不支持 file 协议直接访问，请启动 http 服务访问！\n\n启动命令：npm run start')
}
var token = new URLSearchParams(window.location.search).get('token')
if (!token) {
alert('token不能为空')
}
// 初始化 UI iframe
const docmeeUI = new DocmeeUI({
pptId: null,
token: token, // token
container: document.querySelector('#container'), // 挂载 iframe 的容器
page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面; 'customTemplate' 自定义模版
lang: 'zh', // 国际化
mode: 'light', // light 亮色模式, dark 暗色模式
isMobile: false, // 移动端模式
background: 'linear-gradient(-157deg,#f57bb0, #867dea)', // 自定义背景
padding: '40px 20px 0px',
onMessage(message) {
console.log(message)
if (message.type === 'invalid-token') {
// 在token失效时触发
console.log('token 认证错误')
// 更换新的 token
let newToken = createApiToken(apiKey, uid, limit)
docmeeUI.updateToken(newToken)
} else 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
}
} else if (message.type === 'beforeCreateCustomTemplate') {
const { file, totalPptCount } = message.data
// 是否允许用户继续制作PPT
console.log('用户自定义完整模版，PPT文件：', file.name)
if (totalPptCount < 2) {
console.log('用户积分不足，不允许制作自定义完整模版')
return false
}
return true
} else if (message.type == 'pageChange') {
pageChange(message.data.page)
} else if (message.type === 'beforeDownload') {
// 自定义下载PPT的文件名称
return `PPT_${new Date().getTime()}.pptx`
} else if (message.type == 'error') {
if (message.data.code == 88) {
// 创建token传了limit参数可以限制使用次数
alert('您的次数已用完')
} else {
alert('发生错误：' + message.data.message)
}
}
}
})
function changeSelectType() {
let selectTypes = ['subject', 'text', 'file', 'dataUrl', 'outline']
let selectType = document.getElementById('selectType').value
for (let i = 0; i < selectTypes.length; i++) {
let element = document.getElementById('input_' + selectTypes[i])
element.style.display = (selectType == selectTypes[i] ? 'inline-block' : 'none')
}
}
function parseFileData(file) {
const formData = new FormData()
formData.append('file', file)
let url = 'https://docmee.cn/api/ppt/parseFileData'
let xhr = new XMLHttpRequest()
xhr.open('POST', url, false)
xhr.setRequestHeader('token', token)
xhr.send(formData)
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let resp = JSON.parse(xhr.responseText)
if (resp.code != 0) {
alert('解析文件异常：' + resp.message)
return null
}
return resp.data.dataUrl
} else {
alert('解析文件网络异常, httpStatus: ' + xhr.status)
return null
}
}
}
function extractFileOutline(file) {
const formData = new FormData()
formData.append('file', file)
let url = 'https://docmee.cn/api/ppt/extractFileOutline?format=text'
let xhr = new XMLHttpRequest()
xhr.open('POST', url, false)
xhr.setRequestHeader('token', token)
xhr.send(formData)
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let resp = JSON.parse(xhr.responseText)
if (resp.code != 0) {
alert('提取文件大纲异常：' + resp.message)
return null
}
const data = resp.data
return { dataUrl: data.dataUrl, outlineText: data.outlineText }
} else {
alert('提取文件大纲网络异常, httpStatus: ' + xhr.status)
return null
}
}
}
function generate() {
let selectType = document.getElementById('selectType').value
let input = null
if (selectType == 'file' || selectType == 'outline') {
input = document.getElementById('input_' + selectType).files[0]
} else {
input = document.getElementById('input_' + selectType).value
}
if (!input) {
alert('输入不能为空')
return
}
if (selectType == 'dataUrl' && !input.startsWith('http')) {
alert('文件链接格式错误')
return
}
docmeeUI.navigate({ page: 'creator' })
if (selectType == 'subject') {
// 根据主题
docmeeUI.changeCreatorData({ subject: input }, true)
} else if (selectType == 'text') {
// 根据文本内容
docmeeUI.changeCreatorData({ text: input }, true)
} else if (selectType == 'file') {
// 根据文件
let dataUrl = parseFileData(input)
docmeeUI.changeCreatorData({ dataUrl }, true)
} else if (selectType == 'dataUrl') {
// 根据文件链接
docmeeUI.changeCreatorData({ dataUrl: input }, true)
} else if (selectType == 'outline') {
// 导入大纲
let data = extractFileOutline(input)
docmeeUI.changeCreatorData({ outlineMarkdown: data.outlineText, dataUrl: data.dataUrl }, true)
} else {
alert('未知类型：' + selectType)
return
}
document.querySelector('#container').style.display = 'block'
}
</script>
</html>