首先，纯前端是无法实现doc文件的预览的，我这里是是通过后台进行完成的，本地word是无法实现的，如没有word链接，可以找个word在线文档进行测试

　　1、在index.html中引入后台配好的office服务器

　　<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
　　2、创建组件

　　<template>

    　　　<div class="gaword" id='vabOnlyOffice'></div>
　　</template>
<script>
    export default {
        name: "GAWord",
        props: {
        option: {
            type: Object,
            default: () => {
            return {}
            },
        },
        },
        data () {
            return {
                doctype: '',
                //参数说明
                parameters: {
               　　 'document': {
                    　　//文件扩展名
                    　　'fileType': 'docx',
                   　　 //key 默认置空则不走缓存 always update
                   　　 'key': '',
                    　　//为已查看或编辑的文档定义所需的文件名，该文件名在下载文档时也将用作文件名。
                    　　'title': '',
                    　　//文件地址
                    　　'url': '',
                    //相关权限
                    'permissions': {
                    　　'copy': true,//定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
                    　　'download': true,//定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
                    　　'edit': true,//定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
                    　　'print': true,//定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
                    },
                },
                //文件类型
                'documentType': 'text',
                'height': '100%',
                'width': '100%',
                'editorConfig': {
                    //语言：zh-CN简体中文/en英文
                    'lang': 'zh-CN',
                    //阅读状态 view/edit
                    'mode': 'view',
                   
                    'customization': {
                    //是否显示插件
                    'plugins': false,
                    },
                }
                }
            }
        },
        methods:{
            async setEditor(option) {
                this.doctype = getFileType(option.fileType)

                let config = {
                document: {
                    //后缀
                    fileType: option.fileType,
                    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,　　　// word 地址
                },
                documentType: this.doctype,
                editorConfig: {
                    callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
                    lang: option.lang,//语言设置
                    //定义
                    customization: {
                    　　autosave: false,//是否自动保存
                    　　chat: false,　　　　　　　　// 定义“聊天”菜单按钮是显示还是隐藏，默认为true
                    　　comments: false,　　　　//定义“注释”菜单按钮是显示还是隐藏，默认为true
                    　　help: true,　　　　　　// 定义“帮助”菜单按钮是显示还是隐藏，默认值为true
                    　　compactToolbar:true,      ////定义显示的顶部工具栏类型  //请注意，如果此设置在编辑器界面中发生更改,它将存储在浏览器本地存储中，
                    　　toolbarNoTabs: true,    //定义顶部工具栏选项卡是否明显显示（当设置为true）
                    　　showReviewChanges: true,                   //定义在加载编辑器时自动显示或隐藏审阅更改面板。默认值为 false。
                    　　// modifyContentControl: false,        //定义内容控件设置是否可以更改 默认为true
                    　　hideRightMenu:true,
                    　　// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
                    　　plugins: false,　　　　//是否显示插件
                    　　//暂时无法生效
                    　　customer: {
                       　　 address: '12333333333',
                        　　info: 'S11',
                        　　logo: '123',
                        　　mail: 'j123',
                        　　name: '123',
                        　　www: '123',
                    　　},
                    },
                },
                width: '100%',
                height: '100%',
                }
                console.log(this.watch)
                // eslint-disable-next-line no-undef,no-unused-vars
                new DocsAPI.DocEditor('vabOnlyOffice', config)

            },
        },
        created() {
            console.log(this.$props.option)
            // this.setEditor(this.option)
        },
        mounted(){
            this.setEditor(this.option)
        },
        watch: {
            option: {
                handler: function(n) {
                // this.setEditor(n)
                this.doctype = getFileType(n.fileType)
                },
                deep: true,
            }
    }
}
</script>