史上最全 在线编辑 onlyOffice 使用步骤_onlyoffice使用教程

一、VUE前端

1.首先在页面引入两个js  

https://download.csdn.net/download/weixin_41560845/88359958

2.业务页面跳转到onlyOffice页面方法

onlineEdit(item) {
    this.onlieData = item
    this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
                const routeData = this.$router.resolve({
                    path: '../onlyoffice.html?id='this.ruleForm.id,      //跳转目标窗口的地址
                })
                var $windowObj  = null;
                var that = this;
                $windowObj = window.open(routeData.href, '_blank')
                var loop = setInterval(function() {
                    if($windowObj  != null && $windowObj.closed) {
                        clearInterval(loop);
                        alert('关闭')
                        //do something .....在这里执行回调
                    }
                }, 800);
        }
    })
}

3.onlyOffice.vue页面写法

//①引入两个js
 
import {loadJs,edit} from "./loadJs.js";
 
//②初始化页面方法
 
  mounted(){
 
            loadJs().then(()=>{
 
                  edit().then(()=>{
 
                      // 加载成功，进行后续操作                      
 
                       this.id = this.$route.query.id  //接收参数
 
                       exportTemplateFile( )//调用方法
 
              });
 
            });               
 
        },
 
   methods: {
 
     exportTemplateFile(){
 
     //通过模板生成可以访问的文件，即将模板下载到可直接访问的路径
 
            exportTemplateFile({id: this.id})
 
                .then((res) => {
 
                   if (res.recode == 200) {
 
                   //返回的文件信息，注意返回的两个路径  fileurl 、callbackurl
 
                    var filekey = res.redata.fileid
 
                    var fileurl = res.redata.filepath;//模板处理过后的文件路径
 
                    var filetype =  "docx";//注意这里只能是docx格式
 
                    var filetitle = res.redata.filename;
 
                    var callbackurl = res.redata.filepathSave;//在线编辑时文件需保存是的保存文件的方法。如：var callbackurl = 'http://127.0.0.8:80/project/onlyOfficeController/saveOnlineFile/“这个参数是token”'   console.log(res.redata.filepathw);          this.pageinitDoc(filekey,fileurl,filetype,filetitle,callbackurl,res.redata.userid,res.redata.username,res.redata.itemcode);
 
                   }
 
                })
 
                .catch((error) => {
 
                    console.log(error);
 
                });
 
        },
 
 async  pageinitDoc(filekey,fileurl,filetype,filetitle,callbackurl,userid,username,itemcode){
 
//onlyOffice页面工具配置
 
                    var config = {
 
                            "document": {
 
                        "fileType": filetype,
 
                        "type": "desktop",
 
                        "key": filekey,
 
                        "title": filetitle,
 
                        "url": fileurl
 
                    },
 
                    "editorConfig": {
 
                        "callbackUrl": callbackurl, //保存文件时的回调地址
 
                        "lang": "zh", //语言环境
 
                        "mode": "edit",
 
                        "documentType": "text",
 
                        customization: {
 
                            "hideRightMenu": true,
 
                            "forcesave": true,
 
                          "autosave": false,
 
                          "help": false,
 
                          "chat": false,
 
                          "comments": false,
 
                          "compactHeader":true,
 
                          "compactToolbar":false,
 
                          "hideRulers":false,
 
                          "macros": false,
 
                          "plugins": false,
 
                          "showReviewChanges": false,
 
                          "spellcheck": false,
 
                          "toolbarNoTabs": true,
 
                          "zoom": 100,
 
                          "customer": false,
 
                          "feedback": false,
 
                          "goback":false,
 
                          "hideNotes": true,
 
                          features: {
 
                            spellcheck: false
 
                          }
 
                        },
 
                        "user": {
 
                            id: userid,
 
                            name: username,
 
                            group: itemcode
 
                        }
 
                    }
 
                    };
 
                    var docEditor = new DocsAPI.DocEditor("placeholder", config);
 
                    // self.close();
 
        },
 
},

二、java后端

exportTemplateFile方法

步骤：①获取模板，②替换模板书签内容（没有书签，此步骤可以省略），③生成新的文件，④将文件上传至服务器，⑤返回文件实体 FileObject

在线编辑自动saveOnlineFile方法

controller：
 

 @RequestMapping("/saveonlineFile/{id}/{fileId}/{filekey}/{flag}/{token}")
  @ResponseBody
  public void saveNotieonlineFile(
         HttpServletRequest request, 
         HttpServletResponse response,
         @PathVariable(value="id") String id,
         @PathVariable(value="fileId") String fileId,
         @PathVariable(value="filekey") String filekey,
         @PathVariable(value="flag") String flag,
         @PathVariable(value="token") String token
      ) throws Exception {
   try {
      onlyOfficeComService.saveonlineFile(request,response,id,fileId,filekey,flag,token);
} catch (Exception e) {
   e.printStackTrace();
   log.error(e.getMessage(),e);
}
  }

service

public void saveonlineFile(HttpServletRequest request,HttpServletResponse response, String id,String fileId,
			String filekey,String flag, String token) {
		RequestTools.showParams(request);
		PrintWriter writer = null;
		String body = "";
		
		//获取文件流
		try {
			writer = response.getWriter();
			Scanner scanner = new Scanner(request.getInputStream());
			scanner.useDelimiter("\\A");
			body = scanner.hasNext() ? scanner.next() : "";
			scanner.close();
		} catch (Exception ex) {
			writer.write("get request.getInputStream error:" + ex.getMessage());
		}
 
		//请求体为空
		if (body.isEmpty()) {
			writer.write("ONLYOFFICE回调保存请求体为空");
		}
		
		try {
			System.out.println(body);
	
			JSONObject jsonObj = JSONObject.parseObject(body);
			
			log.info("jsonObj"+jsonObj);
			int status = (Integer) jsonObj.get("status");
//			int status = 6;
	
			log.info("*************************************************");
			log.info("status=" + status);
			log.info("*************************************************");
			// 0找不到具有密钥标识符的文档,
			if (status == 0) {
				writer.write("{\"error\":0}");
			}
	
			// 1正在编辑文档
			if (status == 1) {
				writer.write("{\"error\":0}");
			}
	
			// 2文档已准备好保存
			if (status == 2) {
				String downloadUri = (String) jsonObj.get("url");
				System.out.println(downloadUri);
				writer.write("{\"error\":0}");
	
			}
	
			// 3发生文档保存错误
			if (status == 3) {
				String downloadUri = (String) jsonObj.get("url");
				System.out.println(downloadUri);
				writer.write("{\"error\":0}");
	
			}
	
			// 4文档已关闭，没有任何更改
			if (status == 4) {
				writer.write("{\"error\":0}");
			}
			if (status == 5) {
	
			}
			// 6正在编辑文档，但当前文档状态已保存,
			if (status == 6) {
				// 获取文件路径
				String downloadUri = (String) jsonObj.get("url");
				System.out.println("url:"+downloadUri);
				System.out.println("********************");
				System.out.println(fileId);
				System.out.println("url2:"+downloadUri);
				System.out.println("********************");
 
				//此方法为获取在线文件中的书签内容更新数据库，若无此需求，可忽略
				updatefilecontext(token,id,fileId, downloadUri);
				// 返回根据
				writer.write("{\"error\": 0}");
			}
	
			// 7强制保存文档时出错
			if (status == 7) {
				String downloadUri = (String) jsonObj.get("url");
				System.out.println("downloadUri:***"+downloadUri);
				writer.write("{\"error\":0}");
			}
 
			// writer.write("{\"error\":0}");
		} catch (Exception e) {
			writer.write("{\"error\":-1}");
			e.printStackTrace();
		}
	}