npm install --save document-editor-vue
<template>
<div id="app">
<div style="height: calc(100vh - 0px); flex: 1">
<DocumentEditor
ref="Editor"
id="test"
:config="config"
:documentServerUrl="documentServerUrl"
@DocumentReady="DocumentReady"
@DocumentStateChange="DocumentStateChange"
@RequestCustomEvents="RequestCustomEvents"
/>
</div>
</div>
</template>
<script>
import { DocumentEditor } from "document-editor-vue";
export default {
name: "App",
components: { DocumentEditor },
data() {
return {
ccList: [],
documentServerUrl:
"http://10.10.31.157:7008/web-apps/apps/api/documents/api.js",
config: {
document: {
fileType: "docx",
info: {
favorite: null,
},
key: "333333",
permissions: {
comment: true,
download: true,
edit: true,
fillForms: true,
modifyContentControl: true,
modifyFilter: true,
print: false,
review: true,
reviewGroups: null,
},
title: "demo.docx",
url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/demo.docx",
urlUser: null,
},
documentType: "word",
editorConfig: {
callbackUrl: null,
customization: {
forcesave: false,
goback: {
url: null,
},
hideRightMenu: true,
hideRulers: true,
zoom: 100,
plugins: false,
},
lang: "zh",
mode: "edit",
user: {
group: null,
id: "lcTest",
name: "lcTest",
},
},
token: "",
type: "desktop",
height: "100%",
width: "100%",
},
};
},
methods: {
DocumentReady() {
console.log("文件加载完成");
},
DocumentStateChange() {
console.log("文件变化");
}
},
};
</script>
<style>
body {
margin: 0 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 0;
}
</style>