测试性功能：增加OnlyOfficeTest模块，部署OnlyOffice服务在8044端口，目前未设置token加密
This commit is contained in:
parent
cf60266832
commit
956b4c4351
|
|
@ -14,6 +14,7 @@
|
|||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@onlyoffice/document-editor-vue": "^1.1.1",
|
||||
"axios": "0.18.1",
|
||||
"core-js": "^3.26.1",
|
||||
"docx-preview": "^0.1.14",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script type='text/javascript' src='http://114.116.228.69:8044/web-apps/apps/api/documents/api.js'></script>
|
||||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,18 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path:'/',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "OnlyOfficeTest",
|
||||
name: 'OnlyOfficeTest',
|
||||
component:() => import("@/views/onlyOfficeTest/OnlyOfficeTest"),
|
||||
meta: {title: 'OnlyOfficeTest',icon: 'el-icon-setting'}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/example',
|
||||
// component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div id='vabOnlyOffice'></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OnlyOfficeEditor',
|
||||
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: true,//是否自动保存
|
||||
chat: true,
|
||||
comments: false,
|
||||
help: false,
|
||||
// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
|
||||
//是否显示插件
|
||||
plugins: true,
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<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'>
|
||||
<only-office-editor :option='option' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import OnlyOfficeEditor from './OnlyOfficeEditor'
|
||||
export default{
|
||||
name: 'OnlyOfficeTest',
|
||||
components: {
|
||||
OnlyOfficeEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//参考vabOnlyOffice组件参数配置
|
||||
option: {
|
||||
url: '',
|
||||
isEdit: '',
|
||||
fileType: '',
|
||||
title: '',
|
||||
lang: '',
|
||||
isPrint: '',
|
||||
user: { id:null,name:''}
|
||||
},
|
||||
show: false,
|
||||
config: {
|
||||
document: {
|
||||
fileType: "docx",
|
||||
key: "Khirz6zTPdfd7",
|
||||
title: "Example Document Title.docx",
|
||||
url: "https://example.com/url-to-example-document.docx"
|
||||
},
|
||||
documentType: "word",
|
||||
editorConfig: {
|
||||
callbackUrl: "https://example.com/url-to-callback.ashx"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
getFile() {
|
||||
this.show = true
|
||||
// getAction('/file/selectById', { id: this.id }).then(res => {
|
||||
this.option.isEdit = true
|
||||
this.option.lang = 'zh-CN'
|
||||
this.option.url = 'http://114.116.228.69:8043/api/files/ZPABOZ-%E7%BA%A2%E5%B1%B1%E5%BC%80%E6%BA%90%E5%B9%B3%E5%8F%B0%E7%AE%A1%E7%90%86%E5%91%98%E6%9D%83%E9%99%90%E5%88%86%E7%B1%BB%E7%BB%9F%E8%AE%A121.1.3.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 scoped>
|
||||
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);*/
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1203,6 +1203,11 @@
|
|||
resolved "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz"
|
||||
integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
|
||||
|
||||
"@onlyoffice/document-editor-vue@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npmmirror.com/@onlyoffice/document-editor-vue/-/document-editor-vue-1.1.1.tgz#26573080acae1d7ee6a4dddbad9737e67ae87d06"
|
||||
integrity sha512-PCc56emC+UyKeyOAvLBeEkI2uqTpXMbN2b5Sumf1N+MDLzvyGTV6AFwxvvLRbUdHJFdNn7+7NwN2CE8wGt0gOQ==
|
||||
|
||||
"@soda/friendly-errors-webpack-plugin@^1.7.1":
|
||||
version "1.8.1"
|
||||
resolved "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue