关于springboot:SpringBoot集成onlyoffice实现word文档编辑保存

阐明

onlyoffice为一款开源的office在线编辑组件，提供word/excel/ppt编辑保留操作

以下操作均基于centos8零碎，officeonly镜像版本7.1.2.23
镜像下载地址：https://yunpan.360.cn/surl_y8... （提取码：1f92）
已破解20连贯限度
已导入罕用中文字体，批改了字号
已勾销上传文件大小的限度，批改为500M
暗藏所有操作按钮，暗藏onlyoffice图标和名称，只保根底操作栏目
仅用于word文件和excel文件编辑/保留/查看

Linux装置

yum设置

进入yum的repos目录 cd /etc/yum.repos.d/

cd /etc/yum.repos.d/

批改所有的CentOS文件内容

sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*

更新yum源为阿里镜像

wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repoyum clean allyum makecache

yum装置测试是否能够yum装置

yum install wget –y

装置依赖包

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

docker装置

设置镜像源

sudo yum-config-manager --add-repohttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

装置docker-ce社区版

sudo yum install docker-ce --allowerasing

创立用户组

建设 Docker 用户组sudo groupadd docker增加以后用户到 docker 组sudo usermod -aG docker $USER启动dockersystemctl start docker.service服务开机启动systemctl enable docker.service

装置docker图形化治理页面

docker volume create portainer_datadocker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer

拜访http://localhost:9000/进行治理端初始化设置

onlyoffice部署

上传镜像文件到服务器
载入镜像

docker load < onlyoffice.tar

查看镜像

docker images

启动容器

sudo docker run --name=onlyoffice -i -t -d -p  8088:80 --restart=always 镜像id

Windows装置

装置VMWare虚拟机，装置centos8零碎，参照上述步骤
网络配置成NAT模式，虚拟机进入centos零碎后配置固定ip
NAT网卡设置端口转发，转发9000和8088端口，主机端口和虚构端口统一

增加字体

找到对应字体，如果是windows下的字体进入C:\Windows\Fonts 搜寻
装置High-Logic FontCreator 运行Keygen.exe 点击generate获取激活码
工具下载：https://yunpan.360.cn/surl_y8... （提取码：7059）
关上字体 font=>properties
批改 font family 为custom 中对应的中文，导出字体
上传批改后的字体到liunx文件下 eg:/home/fonts/
查看OnlyOffice容器id

docker ps

进入OnlyOffice容器

docker exec -it 容器id /bin/bash

删除字体缓存

cd /var/www/onlyoffice/documentserver/fontsrm -rf *

复制字体到 /var/www/onlyoffice/documentserver/core-fonts 下

docker cp /home/fonts onlyoffice:/var/www/onlyoffice/documentserver/core-fonts

进入onlyoffice容器执行刷新

/usr/bin/documentserver-generate-allfonts.sh

浏览器革除缓存从新刷新

对接业务零碎

onlyfiice部署结束后会有一个服务地址，例如 http://localhost:8088/

引入api.js

不能下载文件本地援用，肯定要在线援用

<script type="text/javascript" src="http://localhost:8088/web-apps/apps/api/documents/api.js"></script>

申明dom

页面增加一个div，用于渲染编辑器

<div id="placeholder" class="nav" style="width: 100%; height: 100%"></div>

页面渲染

参数阐明

key：对应文档的一个标识，倡议前端随机生成，避免反复

url：打开文档的地址，返回流数据

fileType：文档类型，例如：doc/docx

title：文件名称，例如：2022年工作计划.docx

model：关上模式，例如：edit（编辑模式）/view（浏览模式）

callbackUrl：文件批改后保留回调地址

function initDoc(key, url, fileType, title, model, callbackUrl) {                let config = {                    "document": {                        "documentType": "text",                        "width": "100%", //关上窗口宽度                        "height": "100%", //关上窗口高度                        "fileType": fileType, //文档类型                        "key": key, //定义用于服务辨认文档的惟一文档标识符。每次编辑和保存文档时，都必须从新生成密钥。长度限度为128个符号。                        "title": title, //为查看或编辑的文档定义所需的文件名，该文件名也将在下载文档时用作文件名。长度限度为128个符号。                        "url": url, //定义存储原始查看或编辑的文档的相对URL                        "info": {                            "owner": "王重阳", //文件创建者名称                            "sharingSettings": [ //文件对应用户的操作权限配置                                {                                    "permissions": "Full Access", // 齐全操作权限-Full Access,只读权限-Read Only 回绝拜访-Deny Access                                    "user": "林朝英" //有次权限的用户                                },                                {                                    "permissions": "Read Only",                                    "user": "周伯通"                                },                            ],                            "uploaded": "2010-07-07 3:46 PM" //文件创建工夫                        },                        //文档权限参数                        "permissions": {                            "edit": true, //（文件是否能够编辑，false时文件不可编辑）                            "fillForms": true, //定义是否能在文档中填充表单                            "print": true, //定义文档是否能打印                            "review": false, //第一是否显示审阅文档菜单                            "comment": true, //定义是否能够正文文档。如果正文权限设置为“ true”，则文档侧栏将蕴含“正文”菜单选项；只有将mode参数设置为edit时才失效，默认值与edit参数的值统一。                            "copy": true, //是否容许您将内容复制到剪贴板。默认值为true。                            "download": true, //定义是否能够下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true。                            "modifyContentControl": true, //定义是否能够更改内容控件设置。仅当mode参数设置为edit时，内容控件批改才可用于文档编辑器。默认值为true。                            "modifyFilter": true, //定义过滤器是否能够全局利用（true）影响所有其余用户，或部分利用（false），即仅实用于以后用户。如果将mode参数设置为edit，则过滤器批改仅对电子表格编辑器可用。默认值为true。                        }                    },                    // type: "embedded",                    //打开文档类型                    // text对应各种文档类型(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps)                    //spreadsheet对应表格类型(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx)                    //presentation对应PPT类型(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx)                    "editorConfig": { //编辑配置                        "createUrl": "http://docServer:port/url-to-create-document/", //指定创立文件的页面,增加该配置后文档服务器插件才会显示新建文件按钮                        "mode": model, //文档操作模式 view 视图模式不可编辑  edit 编辑模式可编辑文档                        "callbackUrl": callbackUrl, //保留文件时的回调地址                        "lang": "zh-CN", //语言环境                        "customization": { //定制局部容许自定义编辑器界面，使其看起来像您的其余产品，并更改是否存在其余按钮，链接，更改徽标和编辑者所有者详细信息。                            "help": false, //定义是显示还是暗藏“帮忙”菜单按钮。默认值为true。                            "hideRightMenu": false, //定义在第一次加载时是显示还是暗藏右侧菜单。默认值为false。                            "autosave": false, //定义是启用还是禁用“主动保留”菜单选项。请留神，如果您在菜单中更改此选项，它将被保留到浏览器的localStorage中。默认值为true。                            "forcesave": true, //定义保留按钮是否显示默认false                            "chat": false, //定义“聊天”菜单按钮是显示还是暗藏；请留神，如果您暗藏“聊天”按钮，则相应的聊天性能也将被禁用。默认值为true。                            "commentAuthorOnly": false, //定义用户是否只能编辑和删除他的评论。默认值为false。                            "comments": false, //定义是显示还是暗藏“正文”菜单按钮；请留神，如果您暗藏“评论”按钮，则相应的评论性能将仅可用于查看，评论的增加和编辑将不可用。默认值为true。                            "compactHeader": false, //定义是否将菜单栏放在在徽标旁边使界面更加紧凑默认false。                            "compactToolbar": false, //定义显示的顶部工具栏类型是残缺（false）还是紧凑true。默认值为false 多余菜单将在右侧折叠点击显示。                            "compatibleFeatures": false, //定义仅与OOXML格局兼容的性能的应用。例如，不要在整个文档上应用正文。默认值为false。                            "macros": false, //定义是否将运行文档宏以及可用的宏设置。默认值为true。                            "macrosMode": "warn", //定义是否将运行文档宏。能够采纳以下值： disable -基本不运行；enable -主动运行所有宏；warn -正告宏并申请容许运行。默认值为original。                            "plugins": false, //定义是否将启动插件并可用。默认值为true。                            "showReviewChanges": false, //定义在加载编辑器时是否主动显示或暗藏审阅更改面板。默认值为false。                            "spellcheck": false, //定义在加载编辑器时是否主动关上或敞开拼写查看器。拼写查看器仅实用于文档编辑器和演示文稿编辑器。默认值为true。                            "toolbarNoTabs": false, //定义是突出显示顶部工具栏选项卡款式。默认值为false。                            "unit": "cm", //定义在标尺和对话框中应用的度量单位。能够采纳以下值：cm -厘米，pt-点，inch -英寸。默认值为厘米（cm）。                            "zoom": 100, //定义以百分比为单位的文档显示缩放值。能够取大于0的值。对于文本文档和演示文稿，能够将此参数设置为-1（使文档适宜页面选项）或-2（使文档页面宽度适宜编辑器页面）。默认值为100。                            "customer": { //对于 文档编辑器的显示信息                                "address": "My City, 123a-45", //有权拜访编辑或编辑作者的公司或集体的邮政地址，                                "info": "Some additional information", //无关您心愿其他人意识的公司或集体的一些其余信息，                                "logo": "https://example.com/logo-big.png", //图片徽标的门路（此文件没有特地倡议，然而如果应用通明背景的.png格局会更好）。图片必须具备以下尺寸：432x70，                                "mail": "[email protected]", //有权拜访编辑者或编辑者的公司或集体的电子邮件地址                                "name": "欧阳锋", //该公司或集体的谁能够拜访编辑或编辑作者，名称                                "www": "example.com" //以上公司或集体的家庭网站地址，                            },                            "feedback": { //反馈配置信息                                "url": "https://example.com", //单击“反馈和反对”菜单按钮时将关上的网站地址的相对URL ，                                "visible": false //显示或暗藏“反馈和反对”菜单按钮，                            },                            "goback": { //定义“关上文件地位”菜单按钮和右上角按钮的设置。该对象具备以下参数：                                "blank": true, //在新的浏览器选项卡/窗口（如果值设置为true）或以后选项卡（如果值设置为false）中关上网站。默认值为true，                                "requestClose": false, //定义如果单击“关上文件地位”按钮，则调用events.onRequestClose事件，而不是关上浏览器选项卡或窗口。默认值为false，                                "text": "Open file location", //将在“关上文件地位”菜单按钮和右上角按钮（即，而不是“转到文档”）上显示的文本，                                "url": "https://example.com" //单击“关上文件地位”菜单按钮时将关上的网站地址的相对URL ，                            },                            "logo": {                                "image": "https://example.com/logo.png", //图像文件的门路，用于在一般工作模式下显示（即，在所有编辑器的查看和编辑模式下）。图片必须具备以下尺寸：172x40，                                "imageEmbedded": "https://example.com/logo_em.png", //用于以嵌入式模式显示的图像文件的门路（请参阅config局部以理解如何定义嵌入式文档类型）。图片必须具备以下尺寸：248x40，                                "url": "https://www.baidu.com" //某人单击徽标图像时将应用的相对URL（可用于转到您的网站等）。保留为空字符串或null以使徽标不可单击，                            },                        },                        "user": { //用户信息                            "id": "admin", //用户ID                            "name": "操作员" //用户全名称                        },                        "embedded": { //Embedded局部仅实用于嵌入式文档类型（请参阅config局部以理解如何定义嵌入式文档类型）。它容许更改设置，这些设置定义嵌入式模式下按钮的行为。                            "embedUrl": "https://example.com/embedded?doc=exampledocument1.docx", //定义文档的相对URL，以作为嵌入到网页中的文档的源文件                            "fullscreenUrl": "https://example.com/embedded?doc=exampledocument1.docx#fullscreen", //定义将以全屏模式关上的文档的相对URL。                            "saveUrl": "https://example.com/download?doc=exampledocument1.docx", //定义容许将文档保留到用户集体计算机上的相对URL。                            "shareUrl": "https://example.com/view?doc=exampledocument1.docx", //定义容许其余用户共享此文档的相对URL。                            "toolbarDocked": "top" //定义嵌入式查看器工具栏的地位，能够为top或bottom。                        }                    },                    "events": { //事件配置                        // onAppReady,//-将应用程序加载到浏览器时调用的函数。                        // onCollaborativeChanges //-当文档由其余用户在严格独特编辑模式下独特编辑时调用的函数。                        // onDocumentReady,//-将应用程序加载到浏览器时调用的函数。                        // onDocumentStateChange,//-批改文档时调用的函数。这就是所谓的应用参数：{真正的“数据”}在以后用户编辑文档以及与参数：{“数据”：假}在以后用户的更改发送到文档编辑服务。                        // onDownloadAs,//-调用downloadAs办法时，应用指向已编辑文件的相对URL调用的函数。在data参数中发送要下载的文档的相对URL 。                        // onError,//-产生谬误或其余特定事件时调用的函数。谬误音讯在data参数中发送。                        // onInfo,//-应用程序关上文件时调用的函数。该模式在data.mode参数中发送。能够查看或编辑。                        // onMetaChange,//-通过meta命令更改文档的元信息时调用的函数。文档名称通过data.title参数发送。                        // onOutdatedVersion,//-应用旧的document.key值打开文档进行编辑时，显示谬误后调用的函数，该值用于编辑先前的文档版本并已胜利保留。调用此事件时，必须应用新的document.key从新初始化编辑器。                        // onReady,//-将应用程序加载到浏览器时调用的函数。自从5.0版本不举荐应用，请应用onAppReady代替                        // onRequestClose,//-完结编辑器的工作并且必须敞开编辑器时调用的函数。                        // onRequestCompareFile,//-用户尝试通过单击“存储中的文档”按钮来抉择要比拟的文档时调用的函数。要抉择要比拟的文档，必须调用setRevisedFile办法。如果未声明该办法，则不会显示“来自存储的文档”按钮。                        // onRequestCreateNew,//-用户尝试通过单击“新建”按钮来创立文档时调用的函数。应用此办法代替createUrl字段。如果未声明该办法且未指定createUrl，则将不会显示“创立新”按钮。                        // onRequestEditRights,//-用户尝试通过单击“编辑文档”按钮尝试将文档从视图切换到编辑模式时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该办法，则不会显示“编辑”按钮。                        // onRequestHistory,//-用户尝试通过单击“版本历史记录”按钮显示文档版本历史记录时调用的函数。要显示文档版本历史，您必须调用refreshHistory办法。如果未声明该办法和onRequestHistoryData办法，则不会显示“版本历史记录”按钮。                        // onRequestHistoryClose,//-当用户尝试通过单击“敞开历史记录”按钮来查看文档版本历史记录时，试图调用该文档时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该办法，则不会显示“敞开历史记录”按钮。                        // onRequestHistoryData,//-用户尝试单击文档版本历史记录中的特定文档版本时调用的函数。                        // onRequestInsertImage,//-用户尝试通过单击“保留图像”按钮插入图像时调用的函数。图像插入的类型在参数data.c中指定。                        // onRequestRename,//-用户尝试通过单击“重命名...”按钮重命名文件时调用的函数。                        // onRequestRestore,//-用户单击版本历史记录中的“还原”按钮来还原文件版本时调用的函数。                        // onRequestSaveAs,//-用户尝试通过单击“另存为...”按钮保留文件时调用的函数。文档的题目和要下载的文档的相对URL在data参数中发送。如果未声明该办法，则不会显示“另存为...”按钮。                        // onRequestSharingSettings,//-用户单击“更改拜访权限”按钮来治理文档拜访权限时调用的函数。必须调用setSharingSettings办法来更新无关容许与其余用户共享文档的设置的信息。如果未声明该办法，则不会显示“更改拜访权限”按钮。                        // onRequestUsers,//-评论者能够抉择要在评论中提及的其余用户时调用的函数。要设置用户列表，必须调用setUsers办法。                        // onWarning,//-产生正告时调用的函数。正告音讯在data参数中发送。                        // "onDocumentStateChange": function() {                        // }, //文档扭转后的回调                        //"onDocumentReady" : onDocumentReady, //文档初始化筹备好后的回调                    },                };                var docEditor = new DocsAPI.DocEditor("placeholder", config);            }

数据接口

下载文件

返回数据流即可，示例如下

    @GetMapping("/download")    @ResponseBody    public void download(@RequestParam("attguid") String attguid, HttpServletRequest request, HttpServletResponse response) throws Exception {        AttachmentDO attachment = attachmentService.selectOne(attguid);        String filePath = "";        //云上传的附件        if (attachment.getVirtualpath().contains("ReadAlOSS")) {            if (attachment.getCanedit() == null || attachment.getCanedit() == 20) {                String fileurl = aliUtil.readOSSFile(attachment);                if (!StringUtil.isEmpty(fileurl)) {                    response.sendRedirect(fileurl);                }            } else if (attachment.getCanedit() == 30) {                String fileurl = huaWeiUtil.readOBSFile(attachment);                System.out.println(fileurl);                if (!StringUtil.isEmpty(fileurl)) {                    response.sendRedirect(fileurl);                }            } else if (attachment.getCanedit() == 40) {                String fileurl = minioUtil.readMinioFile(attachment);                System.out.println(fileurl);                if (!StringUtil.isEmpty(fileurl)) {                    response.sendRedirect(fileurl);                }            }        }        //本地文件        String configPath = frameConfig.getAttachPath();        filePath = configPath + attachment.getVirtualpath();        File file = new File(filePath);        if (file.exists()) {            String filename = attachment.getFilename();            response.setContentType("application/octet-stream");            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "utf-8"));            response.setCharacterEncoding("utf-8");            response.setContentLength((int) file.length());            byte[] buff = new byte[(int) file.length()];            BufferedInputStream bufferedInputStream = null;            OutputStream outputStream = null;            try {                outputStream = response.getOutputStream();                bufferedInputStream = new BufferedInputStream(new FileInputStream(file));                int i = 0;                while ((i = bufferedInputStream.read(buff)) != -1) {                    outputStream.write(buff, 0, i);                    outputStream.flush();                }            } catch (IOException e) {                e.printStackTrace();            } finally {                try {                    bufferedInputStream.close();                } catch (IOException e) {                    e.printStackTrace();                }            }        }    }

保留文件

解析传递的参数，获取文件url下载到本地后，进行自定义业务操作

@PostMapping("/save")    @ResponseBody    public void save(@RequestParam Map<String, String> map, HttpServletRequest request, HttpServletResponse response) {        PrintWriter writer = null;        String body = "";        String attguid = request.getParameter("attguid");        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());            return;        }        if (body.isEmpty()) {            throw new CustomerRuntimeException("ONLYOFFICE回调保留申请体未空");        }        JSONObject jsonObj = JSONObject.parseObject(body);        int status = (Integer) jsonObj.get("status");        int saved = 0;        String key = jsonObj.get("key").toString();        if (status == 2 || status == 3 || status == 6) //MustSave, Corrupted        {            String downloadUri = (String) jsonObj.get("url");            System.out.println(downloadUri);            try {                String filePath = "tempfiles/onlyoffice/savedownload/";                FileUtil.initfloderPath(filePath);                String fileName = CommonUtil.getNewGuid();                HttpUtil.downLoadFromUrl(downloadUri, filePath, fileName);                attachLogic.updateAttachContent(attguid, FileUtil.getBytes(filePath + fileName));            } catch (Exception ex) {                saved = 1;                ex.printStackTrace();            }        }        writer.write("{\"error\":" + saved + "}");    }

内部按钮接入

以保留按钮为例

获取编辑器iframe按钮中的slot-btn-dt-save节点元素，定位div下的button按钮，进行js模仿点击实现保留操作

通过监听iframe的message来捕捉到保留完结页面弹出自定义提醒

上述操作因编辑器html页面和onlyoffice服务存在跨域问题，须要配置nginx代理到对立ip端口下

  function HandleSave() {        var frameDocument = document.getElementsByTagName("iframe")[0].contentDocument;        frameDocument.getElementById("slot-btn-dt-save").getElementsByTagName("button")[0].click();    }    window.onmessage = function (event) {        var data = JSON.parse(event.data);        if (data.event == "onDocumentStateChange" && data.data == false) {            OpenSuccessMessage("保留胜利")        }    }