网站平面设计培训,太原做手机网站设计,长沙网站制作作,西安高端网站建设公司主要写一下前端vue的使用#xff0c;需要后端或运维去弄docker服务#xff0c;然后给前端一个api地址
在vue的Index.html页面添加这个
script typetext/javascript srchttp://docker服务器ip:docker服务器端口/web-apps/apps/api/documents/api.js需要后端或运维去弄docker服务然后给前端一个api地址
在vue的Index.html页面添加这个
script typetext/javascript srchttp://docker服务器ip:docker服务器端口/web-apps/apps/api/documents/api.js/scriptonlyoffice文档
在线文档编辑使用页面
templatedivdiv idplaceholder/div/div
/templatescript
export default {name: onlyOffice,data() {return {DocEditor: null,}},mounted() {let obj this.$route.query;console.log(sjsjsjsjjsjsjsjsjsj)this.init(obj,mounted)},methods: {init(e,formType){if (this.DocEditor ! null) {this.DocEditor.destroyEditor();}let url e.fileurl;let mode e.mode || view;//有两种模式edit为编辑模式view为查看let name e.name || 文件;let id e.id;let type e.type;console.log(拿到的在线编辑文件路径,url,mode,name,id,type)let key new Date().getTime() ;//用一个动态key止防止是一样的let file_name url.match(/\.([^\.])$/)[1];//获取文件后缀let houzhuiType;//根据文件后缀判断其在onlioffice里是用什么类型这里我只写了常用的几种需要的可以去看文档添加if(file_name ppt || file_name pptx){houzhuiType slide;}else if(file_name xlsx || file_name xls){houzhuiType cell;}else{houzhuiType word;}console.log(文件后缀,file_name,houzhuiType)let height document.documentElement.clientHeight - 60 px;//高度let config {document: {fileType: file_name,//文件类型//主键,onlyOffice会做缓存key: key,title: namefile_name,//编辑时显示的名称// 文档地址urlurl: url, },documentType: houzhuiType,//文件类型对应在onlyoffice的类型height: height,editorConfig: {mode: mode, //view为查看edit为编辑lang: zh-CN,//默认为英文版,这里设为中文// 自己后端接受文件流的接口地址同时自己可以拼接参数传给后端callbackUrl: process.env.VUE_APP_BASE_URL /inspection/reportUpload/docx/save?id${id}reportType${type},user: {id: 22,name: fff},customization: {//开启保存发送状态6回调forcesave: true,anonymous: {//当前操作用户姓名label: 工具人},},},events: {onDocumentStateChange: this.onDocumentStateChange,onRequestSaveAs: this.onRequestSaveAs,onDownloadAs: this.onDownloadAs,onError: this.error,onWarning: this.warning,onAppReady: this.action,},};this.DocEditor new DocsAPI.DocEditor(placeholder, config);},//onlyoffice加载会执行的方法action(e){console.log(开始)},warning(e) {console.log(警告, e)},error(e) {console.log(错误, e)// this.$message.warning(未知错误)},//缓存到onlyOffice数据库里面的回调onDocumentStateChange(event) {if (event.data) {console.log(The document changed);console.log(event);console.log(event.data);} else {console.log(Changes are collected on document editing service);}},//点击保存按钮的回调但没有效果onRequestSaveAs(event) {console.log(保存,event)},//下载另存为onDownloadAs(event) {// let fileType event.data.fileType;// let url event.data.url;// console.log(ONLYOFFICE Document Editor create file: url);},}
}
/scriptstyle scoped/style
如果一开始提示文件无法保存那就是callbackUrl有问题该接口后端接口没走通
总是打开同一个文件问题文件路径换了也是打开原来的文件 其实是因为onlyoffice自动缓存了当前这个组件只要打开过就会缓存起来第二次打开该页面mounted周期函数都没执行 解决办法利用keepalive里的activated方法里重新执行一遍init方法就行 activated(){console.log(????????????????)let obj this.$route.query;this.init(obj)},上面是我自己研究的方法每次进来就重新走一遍流程其实好像可以通过修改上面配置里config 里的key值来变换但我不知道怎么去改就这样吧能用就行
