VUE + ONLYOFFICE

VUE + ONLYOFFICE

基本配置使用

1 引入后台配置好的office服务器

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

2 封装组件

<template>
    <div id="monitorOffice"></div>
</template>
<script>
import {
    handleDocType} from "../common/utils"
    export default {
    
        props: {
    
            option: {
    
                type: Object,
                default: () => {
    
                    return {
    }
                }
            }
        },
        data() {
    
            return {
    
                doctype: ''
            }
        },
        mounted() {
    
            if (this.option.url)
                this.setEditor(this.option)
        },
        methods: {
    
            setEditor(option) {
    
               this.doctype = handleDocType(option.fileType);
                // office配置参数
                let config = {
    
                    document: {
    
                        fileType: option.fileType,
                        key: "",
                        title: option.title,
                        permissions: {
    
                            comment: false,
                            download: false,
                            modifyContentControl: true,
                            modifyFilter: true,
                            print: false,
                            edit: option.isEdit,