免费网站主机空间,企业建设网站方案,西安那里做网站,网站备案一般多久创建前端应用
pnpm create vite安装依赖
pnpm add onlyoffice/document-editor-vue基本使用
这里有三个非常关键的URL地址#xff1a;
文档服务地址#xff1a;http://192.168.101.5:8080文档地址#xff1a;http://192.168.101.5:18889/test.docx回调地址#xff1a;h…创建前端应用
pnpm create vite安装依赖
pnpm add onlyoffice/document-editor-vue基本使用
这里有三个非常关键的URL地址
文档服务地址http://192.168.101.5:8080文档地址http://192.168.101.5:18889/test.docx回调地址http://192.168.101.5:18889/doc/callback
其中文档地址和回调地址是我们使用 zdppy_api 开发的后端接口。文档服务地址就是Docker启动的docserver容器的地址。
修改 src/App.vue
script
import { defineComponent } from vue;
import { DocumentEditor } from onlyoffice/document-editor-vue;export default defineComponent({name: ExampleComponent,components: {DocumentEditor},data() {return {config: {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,url: http://192.168.101.5:18889/test.docx},documentType: word,editorConfig: {callbackUrl: http://192.168.101.5:18889/doc/callback,},height: 700px,width: 100%}}},methods: {onDocumentReady() {console.log(Document is loaded);},onLoadComponentError (errorCode, errorDescription) {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}}},
});
/scripttemplateDocumentEditoriddocEditordocumentServerUrlhttp://192.168.101.5:8080:configconfig:events_onDocumentReadyonDocumentReady:onLoadComponentErroronLoadComponentError/
/template改造成vue3的setup语法
原始代码
script
import { defineComponent } from vue;
import { DocumentEditor } from onlyoffice/document-editor-vue;export default defineComponent({name: ExampleComponent,components: {DocumentEditor},data() {return {config: {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,url: http://192.168.101.5:18889/test.docx},documentType: word,editorConfig: {callbackUrl: http://192.168.101.5:18889/doc/callback,},height: 700px,width: 100%}}},methods: {onDocumentReady() {console.log(Document is loaded);},onLoadComponentError (errorCode, errorDescription) {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}}},
});
/scripttemplateDocumentEditoriddocEditordocumentServerUrlhttp://192.168.101.5:8080:configconfig:events_onDocumentReadyonDocumentReady:onLoadComponentErroronLoadComponentError/
/template第一步引入组件
import { DocumentEditor } from onlyoffice/document-editor-vue;第二步实现config配置信息对象
const config {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,url: http://192.168.101.5:18889/test.docx},documentType: word,editorConfig: {callbackUrl: http://192.168.101.5:18889/doc/callback,},height: 700px,width: 100%
}第三步文档准备好时的回调事件
const onDocumentReady () {console.log(Document is loaded);
}第四步文档发生错误时的回调事件
const onLoadComponentError (errorCode, errorDescription) {switch(errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}改造后的代码
script setup
import {DocumentEditor} from onlyoffice/document-editor-vue;const config {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,url: http://192.168.101.5:18889/test.docx},documentType: word,editorConfig: {callbackUrl: http://192.168.101.5:18889/doc/callback,},height: 700px,width: 100%
}const onDocumentReady () {console.log(Document is loaded);
}
const onLoadComponentError (errorCode, errorDescription) {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
/scripttemplateDocumentEditoriddocEditordocumentServerUrlhttp://192.168.101.5:8080:configconfig:events_onDocumentReadyonDocumentReady:onLoadComponentErroronLoadComponentError/
/template
