先看看效果吧：
效果图
环境
- Ubuntu18.04 下 安装 docker
- webpack cli2.0
Step1: 安装 docker
Step2: 启动 doucmentserver
注意：如果下载镜像比较慢，可以考虑指定国内源， 在 /etc/docker/ 下新建一个文件名 daemon.json 并往内添加
{
"registry-mirrors": ["http://hub-mirror.c.163.com"]
}
sudo docker run -i -t -d -p 8090:80 --restart=always \
-v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice \
-v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data \
-v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice onlyoffice/documentserver
Step3: 页面显示 PowerPoint
test.html
<!DOCTYPE HTML>
<html>
<body>
<div id="placeholder"></div>
<!-- 修改为自己搭建的 documentserver ip 和端口 -->
<script type="text/javascript" src="http://documentserver ip:port/web-apps/apps/api/documents/api.js"></script>
<script language="javascript" type="text/javascript">
new DocsAPI.DocEditor("placeholder", {
"document": {
"fileType": "pptx",
"key": "dfes21de", // 更新不同的key
"title": "测试pptx",
"url": "https://sample-site.com/ppt/sample1.pptx" // 修改为可访问的 pptx 文件
},
"documentType": "presentation",
"width": "1000px",
"height": "600px",
// "editorConfig": {
// "callbackUrl": "编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置"
// },
"permissions": {
"comment": false,
"download": false,
"edit": false, //（文件是否可以编辑，false时文件不可编辑）
"fillForms": false,
"print": false,
"review": false
}
});
</script>
</body>
</html>
演示效果：
演示效果
Step4: 在vue中 测试
由于需要导入 http://documentserver ip:port/web-apps/apps/api/documents/api.js， 因此，创建一个组件用来专门引入外部js文件。
// src/common/importJS.js
// 导入外部js
import Vue from 'vue'
Vue.component('remote-script', {
render: function (createElement) {
var self = this;
return createElement('script', {
attrs: {
type: 'text/javascript',
src: this.src
},
on: {
load: function (event) {
self.$emit('load', event);
},
error: function (event) {
self.$emit('error', event);
},
readystatechange: function (event) {
if (this.readyState == 'complete') {
self.$emit('load', event);
}
}
}
});
},
props: {
src: {
type: String,
required: true
}
}
});
然后，在组件内编写代码：
<template>
<div class="hello">
<remote-script :src="src"></remote-script>
<!-- <h1>{{ msg }}</h1> -->
<div>
<button @click="Demo1">Demo1</button>
<button @click="Demo2">Demo2</button>
<button @click="Demo3">Demo3</button>
<button @click="Sample0">Sample0</button>
<button @click="Sample1">Sample1</button>
</div>
<br />
<div id="sample">
<div id="placeholder"></div>
</div>
</div>
</template>
<script>
import "@/common/importJS.js";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
src: "http://documentserver ip:port/web-apps/apps/api/documents/api.js", // 修改为自己搭建的 documentserver ip 和端口
url: "https://sample-site.com/ppt/demo.pptx", // 可访问的文件url
};
},
methods: {
initPPT(url) {
var x = document.getElementById("placeholder");
var sample = document.getElementById("sample");
if(x == null){
// 先删除 sample 下的节点
sample.removeChild(sample.childNodes[0])
// 创建 placeholder 节点
var mydiv = document.createElement("div");
mydiv.id = "placeholder"
sample.appendChild(mydiv);
}
console.log(x)
var r = this.randomString(10);
console.log(r);
console.log(url);
setTimeout(() => {
new DocsAPI.DocEditor("placeholder", {
document: {
fileType: "pptx",
key: r, // 更新不同的key
title: "测试pptx",
url: url,
},
documentType: "presentation",
width: "900px",
height: "600px",
// "editorConfig": {
// "mode": "view"
// },
permissions: {
comment: false,
download: false,
edit: false, //（文件是否可以编辑，false时文件不可编辑）
fillForms: false,
print: false,
review: false,
},
});
}, 5000);
},
Demo1() {
var url = "https://sample-site.com/ppt/demo1.pptx";
this.initPPT(url);
},
Demo2() {
var url = "https://sample-site.com/ppt/demo2.pptx";
this.initPPT(url);
},
Demo3() {
var url = "https://sample-site.com/ppt/demo3.pptx";
this.initPPT(url);
},
Sample0() {
var url = "https://sample-site.com/ppt/sample.pptx";
this.initPPT(url);
},
Sample1() {
var url = "https://sample-site.com/ppt/sample1.pptx";
this.initPPT(url);
},
randomString(len) {
len = len || 32;
var $chars =
"ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = "";
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
},
mounted() {
this.initPPT(this.url);
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
在 initPPT() 方法内， 由于生成PPT后，带id="placeholder" 的节点会被删掉，所以在点击按钮时候先判断，若不存在则需要手动创建。需要注意的是，不知道为啥 动画效果很多都会丢失。
Reference
