插件代码:
<template>
<div class="onlyoffice" :id="id"></div>
</template>
<script>
export default {
name: "onlyoffice",
props: ["id", "userConfig", "config"],
data: function() {
return {
docKey: new Date().getTime() + "",
documentType: {
doc: "text",
docx: "text",
pdf: "text",
xls: "spreadsheet",
xlsx: "spreadsheet",
ppt: "presentation",
pptx: "presentation"
}
};
},
computed: {
fileType: function() {
let _self = this;
// console.log(_self.userConfig)
let aaa = _self.userConfig.docname;
console.log(aaa);
// _self.userConfig.docname = '2222.docx'
let index = _self.userConfig.docname.indexOf(".");
return _self.userConfig.docname.substr(index + 1);
}
},
mounted: function() {
let _self = this;
// console.log(_self.userConfig)
console.log("mounted");
// _self.getFileType()
if (!_self.validateProps()) return;
_self.createOnlyoffice();
},
methods: {
validateProps: function() {
let _self = this;
if (!_self.id) {
_self.$alert("id未配置", "onlyoffice组件调用出错");
return false;
}
if (!_self.config) {
_self.$alert("config未配置", "onlyoffice组件调用出错");
return false;
}
if (!Object.keys(_self.documentType).includes(_self.fileType)) {
_self.$alert(
`${_self.userConfig.docname} 不支持的文件类型`,
"onlyoffice组件调用出错"
);
return false;
}
return true;
},
createOnlyoffice: function() {
let _self = this;
const s = document.createElement("script");
s.src = `http://${_self.$globalVars.JSSERVER}/web-apps/apps/api/documents/api.js`;
s.onload = function() {
const config = {
document: {
fileType: _self.fileType,
key: _self.docKey,
title: _self.userConfig.downname,
// 'url': `http://${_self.$globalVars.FILESERVER}/documentFiles/${_self.userConfig.docname}`
url: `http://${_self.$globalVars.FILESERVER}/uploadedfile/${_self.userConfig.busitype}/${_self.userConfig.docname}`
},
documentType: _self.documentType[_self.fileType],
editorConfig: {
customization: {
autosave: false,
forcesave: true
},
lang: "zh",
mode: _self.config.mode === "view" ? "view" : "edit",
// 'mode': 'view'
// 'callbackUrl': `http://${_self.$globalVars.APISERVER}/document/savedocument?fileName=${_self.userConfig.docname}`
callbackUrl: `http://${_self.$globalVars.FILESERVER}/Boflow/savedocument?fileName=${_self.userConfig.docname}&busitype=${_self.userConfig.busitype}`
}
};
console.log(config);
let docEditor = new DocsAPI.DocEditor(_self.id, config); // eslint-disable-line
// console.log(docEditor)
};
document.body.appendChild(s);
}
}
};
</script>
html:
<!-- 查看正文 -->
<el-dialog title="正文" :visible.sync="fileDialogVisible" width="80%">
<div style="height:400px">
<onlyoffice id="placeholder" :config="config" :userConfig="userConfig"></onlyoffice>
</div>
</el-dialog>
data:
config: {
mode: "view" // 文档打开方式,值为'view'时为只读的浏览模式, 不传或其他值都为编辑模式
},
userConfig: {
busiid: "",
busitype: "incomingDocument",
doctype: "",
downname: "",
docname: ""
}
js:
import onlyoffice from “@/components/onlyoffice/onlyoffice.vue”;
components: {
onlyoffice
},