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

如：// var callbackurl = 'http://127.0.0.8:80/project/onlyOfficeController/this.id = this.$route.query.id//接收参数。

文章共1,158字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

LiMay4

3310人浏览 · 2023-10-20 11:34:29

LiMay4 · 2023-10-20 11:34:29 发布

一、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();
		}
	}