首先，纯前端是无法实现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',
},
},
},
'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>