OnlyOffice - 在webpack项目的页面上展示 PowerPoint

先看看效果吧：

效果图

环境

• Ubuntu18.04 下 安装 docker
• webpack cli2.0

Step1: 安装 docker

请参考 Docker安装-Ubuntu16.04

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

演示效果：

演示效果

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
    }
  }
});

然后，在组件内编写代码：

在 initPPT() 方法内， 由于生成PPT后，带id="placeholder" 的节点会被删掉，所以在点击按钮时候先判断，若不存在则需要手动创建。需要注意的是，不知道为啥 动画效果很多都会丢失。

---

Reference

• https://api.onlyoffice.com/