onlyoffice+vue实现在线预览在线编辑

# 前言

ONLYOFFICE，是一个包含常用办公套件，Word 、Excel、PPT大办公套件搬到了云端，只需要一个浏览器即可以在线使用 Office 的各种功能。

# 搭建服务

官网传送门：https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx?from=api_csharp_example (opens new window)

# docker搭建

# 1.安装docker

# 2.拉取镜像

sudo docker pull onlyoffice/documentserver

# 3.运行镜像

创建数据目录

# 创建对应目录
mkdir logs
mkdir data
mkdir lib
mkdir db
ls

1
2
3
4
5
6

# 启动docker容器，默认启动端口为80，可以进行修改
docker run -i -t -d -e TZ="Asia/Shanghai" -p 6831:80 --restart=always \
    -v /root/data/onlyoffice/DocumentServer/logs:/var/log/onlyoffice  \
    -v /root/data/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data  \
    -v /root/data/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \
    -v /root/data/onlyoffice/DocumentServer/db:/var/lib/postgresql  onlyoffice/documentserver
    
# 查看镜像下载
docker images

# 查看容器
docker ps

# 查看启动日志
docker logs -f 容器ID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

访问 localhost:6831/welcome 测试是否成功

# 配置使用

# 1.预览文件

###支持的文档类型
# 5.4.2 版本
# 字符串类型，定义文档打开类型：
1、text(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps);
2、spreadsheet(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx);
3、presentation(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx).

1
2
3
4
5
6

public/index.html引入搭好的文档解析api

<script type='text/javascript' src='http://ip:port/web-apps/apps/api/documents/api.js'></script>

# 2.vue组件封装

<!--onlyoffice 编辑器-->
<template>
  <div id='vabOnlyOffice'></div>
</template>

<script>
  export default {
    name: 'VabOnlyOffice',
    props: {
      option: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        doctype: '',
        docEditor: null,
      }
    },
    beforeDestroy() {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
   },
    watch: {
      option: {
        handler: function(n) {
          this.setEditor(n)
          this.doctype = this.getFileType(n.fileType)
        },
        deep: true,
      },
    },
    mounted() {
      if (this.option.url) {
        this.setEditor(this.option)
      }
    },
    methods: {
      async setEditor(option) {
        if (this.docEditor !== null) {
          this.docEditor.destroyEditor();
          this.docEditor = null;
        }
        this.doctype = this.getFileType(option.fileType)
        let config = {
          document: {
            //后缀
            fileType: option.fileType,
            key: option.key ||'',
            title: option.title,
            permissions: {
              edit: option.isEdit,//是否可以编辑: 只能查看，传false
              print: option.isPrint,
              download: false,
              // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
              // "review": true //跟踪变化
            },
            url: option.url,
          },
          documentType: this.doctype,
          editorConfig: {
            callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            lang: option.lang,//语言设置
            //定制
            customization: {
              autosave: false,//是否自动保存
              chat: false,
              comments: false,
              help: false,
              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
              //是否显示插件
              plugins: false,
            },
            user:{
            id:option.user.id,
            name:option.user.name
          },
          mode:option.model?option.model:'edit',
          },
          width: '100%',
          height: '100%',
          token:option.token||''
        }

        // eslint-disable-next-line no-undef,no-unused-vars
        this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)

      },
      getFileType(fileType) {
        let docType = ''
        let fileTypesDoc = [
            'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
        ]
        let fileTypesCsv = [
            'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
        ]
        let fileTypesPPt = [
            'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
        ]
        if (fileTypesDoc.includes(fileType)) {
            docType = 'text'
        }
        if (fileTypesCsv.includes(fileType)) {
            docType = 'spreadsheet'
        }
        if (fileTypesPPt.includes(fileType)) {
            docType = 'presentation'
        }
        return docType
      }
    },
  }
</script>

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

组件调用

<template>
  <div id="app">
    <div class='qualityManual-container'>
        <div>
          <button style='width: 120px;' type='primary' @click='getFile'>测试预览office文档</button>
          <button style='width: 120px;' type='primary' @click='close'>关闭</button>
        </div>
        <div v-if='show' class='qualityManual-container-office'>
          <vab-only-office :option='option' />
        </div>
  </div>
  </div>
</template>

<script>
import vabOnlyOffice  from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    vabOnlyOffice
  },
  data() {
      return {
        //参考vabOnlyOffice组件参数配置
        option: {
          url: '',
          isEdit: '',
          fileType: '',
          title: '',
          lang: '',
          isPrint: '',
          user: { id:null,name:''}
        },
        show: false,
      }
    },
    methods: {
      getFile() {
        this.show = true
        // getAction('/file/selectById', { id: this.id }).then(res => {
        this.option.isEdit = false
        this.option.lang = 'zh-CN'
        this.option.url = 'http://ip:port/a.xlsx'
        this.option.title = '123'
        this.option.fileType = 'xlsx'
        this.option.isPrint = false
        this.option.user= { id:12,name:'张三'}
        // })
      },
      close() {
        this.show = false
      },
    },
}
</script>

<style>
html,body{
  height:100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height:100%;
  
}
.qualityManual-container {
    padding: 0 !important;
    height:100%;
  }
  .qualityManual-container-office {
      width: 100%;
      height: calc(100% - 55px);
    }
</style>

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

#OnlyOffice #Vue

上次更新: 2024/02/20, 17:31:36

← 使用libreoffice将word转化成pdf Stable-Diffusion-WebUI 搭建使用教程→