OnlyOffice实现在线预览

原创已于 2025-03-06 11:27:48 修改 · 7.7k 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

于 2024-05-08 14:35:47 首次发布

JAVA 同时被 2 个专栏收录

14 篇文章

订阅专栏

Docker

9 篇文章

订阅专栏

该文章已生成可运行项目，

背景：公司工作需要整合一款可以预览xlsx的工具

本文主要介绍docker集成过程

前期准备：本机已经安装了docker，jdk等环境

1、搜索镜像

docker search onlyoffice

2、拉取镜像

sudo docker pull onlyoffice/documentserver

3、查看镜像

docker images

4、启动镜像

docker run -i -t -d -p 8088:80 -v /usr/local/onlyoffice:/var/www/onlyoffice/documentserver/web-apps/wsData onlyoffice/documentserver

设置成开机启动：docker update --restart=always 容器id/名称

5、进入容器，找到配置文件

#进入容器
docker exec -it 容器名 bash
#找到配置文件local.json
cd /etc/onlyoffice/documentserver/
#如果不能编辑，需要安装vim命令
apt-get update     
apt-get install vim

6、重启服务

supervisorctl restart all

7、添加字体字号

删除原有

#切换目录
cd /usr/share/fonts/ 
rm -rf *
#切换目录
cd /var/www/onlyoffice/documentserver/core-fonts/
rm -rf *

从windows系统中找到字体文件夹，压缩上传到服务器下

通过docker命令拷贝

docker cp /home/fonts/ 容器id:/usr/share/fonts/

cd /usr/share/fonts/font

cp * ../

ls

rm -rf font

8、添加字号

下载app.js文件到本地编辑

sudo docker cp cf321c512a6a:/var/www/onlyoffice/documentserver/web-apps/apps/documenteditor/main/app.js /Users/jianchenghou/uploadjar

本地编辑

把以下内容复制到{value:8,displayValue:"8"}前面

{value:42,displayValue:"初号"},{value:36,displayValue:"小初"},{value:26,displayValue:"一号"},{value:24,displayValue:"小一"},{value:22,displayValue:"二号"},{value:18,displayValue:"小二"},{value:16,displayValue:"三号"},{value:15,displayValue:"小三"},{value:14,displayValue:"四号"},{value:12,displayValue:"小四"},{value:10.5,displayValue:"五号"},{value:9,displayValue:"小五"},{value:7.5,displayValue:"六号"},{value:6.5,displayValue:"小六"},{value:5.5,displayValue:"七号"},{value:5,displayValue:"八号"},

9、将修改好的app.js拷贝到容器中

docker cp app.js cf321c512a6a:/var/www/onlyoffice/documentserver/web-apps/apps/documenteditor/main/

#进入容器
docker exec -it cf321c512a6a /bin/bash
cd /usr/bin
#执行：
./documentserver-generate-allfonts.sh

10、前端代码

服务端容器地址：

http://192.168.1.180:8088/web-apps/apps/api/documents/api.js

文件下载地址：

http://192.168.1.180:6070/minio/v1/download?id=253566000196390912&bucketName=upload
保存之后回调方法：

http://192.168.1.180:8000/word/callbackSave?wjbh=253566000196390912

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script type="text/javascript" src="http://192.168.1.180:8088/web-apps/apps/api/documents/api.js"></script>
    <style>
        html {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body class="full-screen">
<div id="placeholder"></div>

<script language="javascript" type="text/javascript">
    var docEditor = new DocsAPI.DocEditor("placeholder", {

        "document": {
            "fileType": "xlsx",
            //每次打开需要生成不同的key
            "key": "253566000196390912",
            "title": "开发计划模版.xlsx",
            //地址必须文件服务器能访问到
            "url": "http://192.168.1.180:6070/minio/v1/download?id=253566000196390912&bucketName=upload"
        },
        "editorConfig":     {
            //回调地址，当点击保存时触发，wjbh为数据库的文件标识，可以在回调方法中做业务处理，回调程序的服务器必须能访问到文件服务器
            "callbackUrl": "http://192.168.1.180:8000/word/callbackSave?wjbh=253566000196390912",
            "lang": "zh-CN", // 中文
             //"mode": "view",//查看模式
            "mode": "edit",//编辑模式
            "customization": { //定制部分允许自定义编辑器界面，使其看起来像您的其他产品，并更改是否存在其他按钮，链接，更改徽标和编辑者所有者详细信息。
                "help": false, //定义是显示还是隐藏“帮助”菜单按钮。默认值为true。
                "hideRightMenu": false, //定义在第一次加载时是显示还是隐藏右侧菜单。默认值为false。
                "autosave": false, //定义是启用还是禁用“自动保存”菜单选项。请注意，如果您在菜单中更改此选项，它将被保存到浏览器的localStorage中。默认值为true。
                "forcesave": true, //定义保存按钮是否显示默认false
                "chat": false, //定义“聊天”菜单按钮是显示还是隐藏；请注意，如果您隐藏“聊天”按钮，则相应的聊天功能也将被禁用。默认值为true。
                "commentAuthorOnly": false, //定义用户是否只能编辑和删除他的评论。默认值为false。
                "comments": true, //定义是显示还是隐藏“注释”菜单按钮；请注意，如果您隐藏“评论”按钮，则相应的评论功能将仅可用于查看，评论的添加和编辑将不可用。默认值为true。
                "compactHeader": false, //定义是否将菜单栏放在在徽标旁边使界面更加紧凑默认false。
                "compactToolbar": false, //定义显示的顶部工具栏类型是完整（false）还是紧凑true。默认值为false 多余菜单将在右侧折叠点击显示。
                "compatibleFeatures": false, //定义仅与OOXML格式兼容的功能的使用。例如，不要在整个文档上使用注释。默认值为false。
                "macros": true, //定义是否将运行文档宏以及可用的宏设置。默认值为true。
                "macrosMode": "warn", //定义是否将运行文档宏。可以采用以下值： disable -根本不运行；enable -自动运行所有宏；warn -警告宏并请求允许运行。默认值为original。
                "plugins": false, //定义是否将启动插件并可用。默认值为true。
                "showReviewChanges": false, //定义在加载编辑器时是否自动显示或隐藏审阅更改面板。默认值为false。
                "spellcheck": true, //定义在加载编辑器时是否自动打开或关闭拼写检查器。拼写检查器仅适用于文档编辑器和演示文稿编辑器。默认值为true。
                "toolbarNoTabs": false, //定义是突出显示顶部工具栏选项卡样式。默认值为false。
                "unit": "cm", //定义在标尺和对话框中使用的度量单位。可以采用以下值：cm -厘米，pt-点，inch -英寸。默认值为厘米（cm）。
                "zoom": 100, //定义以百分比为单位的文档显示缩放值。可以取大于0的值。对于文本文档和演示文稿，可以将此参数设置为-1（使文档适合页面选项）或-2（使文档页面宽度适合编辑器页面）。默认值为100。
                "goback": { //定义“打开文件位置”菜单按钮和右上角按钮的设置。该对象具有以下参数：
                    "blank": true, //在新的浏览器选项卡/窗口（如果值设置为true）或当前选项卡（如果值设置为false）中打开网站。默认值为true，
                    "requestClose": false, //定义如果单击“打开文件位置”按钮，则调用events.onRequestClose事件，而不是打开浏览器选项卡或窗口。默认值为false，
                    "text": "Open file location", //将在“打开文件位置”菜单按钮和右上角按钮（即，而不是“转到文档”）上显示的文本，
                    "url": "https://www.baidu.com" //单击“打开文件位置”菜单按钮时将打开的网站地址的绝对URL ，
                }
            },
            "user": { //用户信息
                "id": "111111", //用户ID
                "name": "张三" //用户全名称
            },
            "documentType": "cell",//表格
            //"documentType": "word",//文档
            // "documentType": "slide",//ppt演示
            // "type": "desktop"
        }
    });
</script>
</body>
<style type="text/css">
    .full-screen {
        height: 100%;
        overflow: hidden;
    }
</style>

</html>

11、后端java接口

controller

   @PostMapping(value = "/callbackSave", produces = "application/json;charset=UTF-8")
    @ResponseBody
    public void callbackSave(HttpServletRequest request, HttpServletResponse response) throws IOException {
        minioService.callbackSave(request, response);
    }



@Controller
public class WebController {

    @RequestMapping(value = "officeView", method = {RequestMethod.GET, RequestMethod.POST})
    public String officeView(){
        return "office/view";
    }

}

service

 public void callbackSave(HttpServletRequest request, HttpServletResponse response) throws IOException {
        PrintWriter writer = response.getWriter();
        String body = "";
        try {
            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()) {
            writer.write("empty request.getInputStream");
            return;
        }
        JSONObject jsonObj = JSON.parseObject(body);
        System.out.println("回调参数对象 =====》》》 " + jsonObj);
        int status = (Integer) jsonObj.get("status");
        int saved = 0;
        //status=6,表示点击保存按钮
        if (status == 3 || status == 6) //MustSave, Corrupted
        {
            //获取url
            String downloadUri = (String) jsonObj.get("url");
            try {
                //获取onlyOffice缓存中的文件流
                URL url = new URL(downloadUri);
                java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
                InputStream stream = connection.getInputStream();
                if (stream == null) {
                    throw new Exception("Stream is null");
                }
                String wjbh = request.getParameter("wjbh");
                if (StringUtils.isEmpty(wjbh)) {
                    throw new Exception("文件编号为空！！");
                }
               /* if (ObjectUtils.isEmpty(fileEntity)) {
                    throw new Exception("该文件不存在文件库中！！");
                }*/
                //上传新文件到文件服务器

                //根据文件编号获取文件对象

                //获取文件大小
                int size= connection.getContentLength();

                //重新设置文件对象属性并保存新文件到数据库

                connection.disconnect();
                //根据文件编号删除文件服务器的文件

            } catch (Exception ex) {
                saved = 1;
                ex.printStackTrace();
            }
        }
        writer.write("{\"error\":" + saved + "}");
    }

12、访问：http://192.168.1.180:8000/officeView

13、遇到问题：
1）出现

修改local.json,改为false

vim /etc/onlyoffice/documentserver/local.json

2)出现文件下载失败，需要考虑文件获取的路径是否有问题

2.1）因为服务在容器中，需要判断容器是否能够访问到宿主机

docker exec -it 容器 /bin/bash
curl 后端服务下载文件的地址

2.2）OnlyOffice Converter的日志文件

cd /var/log/onlyoffice/documentserver/converter

cat out.log

发现出现：

Error: DNS lookup 192.168.1.180(family:undefined, host:undefined) is not allowed. Because, It is private IP address.

那么需要编辑配置文件允许私有ip通过：

编辑docker中/etc/onlyoffice/documentserver/default.json下的内容

搜索并修改以下字段为true

"request-filtering-agent" : {
        "allowPrivateIPAddress": true,
        "allowMetaIPAddress": true
},

之后执行重启命令： supervisorctl restart all

综上所述：注意容器和宿主机的网络问题及权限问题

2.3）本地开发测试如果都在内网，不存在跨域，如果部署到外部服务器，前端引入js之后，可能会出现跨域问题；

解决方式：允许我们自己的nginx服务器配置跨域请求

add_header Access-Control-Allow-Origin 'onoffice部署服务器ip:8088';

2.4)如果文件服务器和容器不在一台机器上，那么就会出现容器访问外部服务器的情况，需要考虑是否能够通；如果不通，宿主机执行

修改防火墙，允许从接口 docker0 访问网络
# iptables -I INPUT 3 -i docker0 -j ACCEPT
3是防火墙编号。因为防火墙规则是有序的，所以需要选择适当编号确保此规则能够生效。

2.5）如果预览的文件过大，可能不支持，需要修改参数，解除限制:500MB:524288000

修改配置文件：在容器中 vim /etc/onlyoffice/documentserver/default.json

之后执行重启命令： supervisorctl restart all

本文章已经生成可运行项目