OnlyOffice实现在线预览

背景:公司工作需要整合一款可以预览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

<think>好的,我需要帮助用户了解如何在若依框架中集成OnlyOffice实现在线预览功能。首先,我需要回顾一下用户提供的引用内容,看看是否有相关的信息可以利用。引用[1]提到了Spring Boot集成OnlyOffice的项目,引用[2]介绍了OnlyOffice的功能,引用[3]和[4]分别提到了OpenOffice的集成和OnlyOffice的Docker部署。用户的问题是关于若依框架的,而若依是基于Spring Boot的,所以可能需要参考引用[1]和[3]中的Spring Boot集成方法。 接下来,我需要确定若依框架的基本结构。若依是一个权限管理系统,后端使用Spring Boot,前端可能是Vue.js。集成OnlyOffice需要后端配置服务,前端嵌入编辑器。引用[1]提到通过简单配置集成OnlyOffice服务,引用[4]展示了用Docker运行OnlyOffice的实例,所以可能需要先部署OnlyOffice服务。 然后,步骤可能包括:1. 部署OnlyOffice文档服务器,可以使用Docker命令如引用[4]中的例子;2. 后端Spring Boot配置API接口,处理文档的存储和获取文档URL;3. 前端Vue组件中嵌入OnlyOffice的编辑器,通过配置文档URL和API地址实现预览。 需要注意的细节包括:确保OnlyOffice服务器可访问,处理跨域问题,文档存储路径的正确配置,以及生成正确的文档预览链接。可能还需要参考引用[3]中的文档转换方法,但这里主要是预览,可能不需要转换,但需要确保文件类型支持。 用户可能需要具体的代码示例,比如后端如何生成文档链接,前端如何调用OnlyOffice的编辑器。同时,需要验证步骤是否可行,确保引用的方法适用于若依框架的结构。可能遇到的问题包括权限配置、接口安全性和文档服务器的网络访问,这些都需要在教程中提及解决方案。</think>以下是若依框架集成OnlyOffice实现在线预览功能的详细步骤: ### 一、部署OnlyOffice文档服务器 1. 使用Docker快速部署(推荐): ```bash docker run -itd -p 8001:80 --name onlyoffice --restart always onlyoffice/documentserver ``` 部署成功后通过`http://服务器IP:8001`验证访问[^4] 2. 若本地部署,需安装libreoffice组件: ```bash apt-get install libreoffice ``` ### 二、若依后端配置(Spring Boot) 1. 添加文件存储接口 ```java @RestController @RequestMapping("/api/document") public class DocumentController { @Value("${file.upload-dir}") private String uploadDir; @PostMapping("/upload") public AjaxResult uploadFile(@RequestParam("file") MultipartFile file) { // 文件存储逻辑(参考若依原有文件上传模块) String fileUrl = RuoYiConfig.getUploadPath() + "/" + fileName; return AjaxResult.success().put("url", fileUrl); } @GetMapping("/previewUrl") public AjaxResult getPreviewUrl(String filePath) { return AjaxResult.success().put("url", "http://docserver:8001/web-apps/apps/api/documents/api.js"); } } ``` 2. 配置文档服务器地址(application.yml): ```yaml onlyoffice: doc-server: http://服务器IP:8001 storage-path: /home/ruoyi/uploadPath ``` ### 三、前端集成(Vue) 1. 创建文档预览组件 DocumentPreview.vue ```vue <template> <div id="onlyoffice" style="height: 80vh"></div> </template> <script> export default { props: ['documentUrl'], mounted() { this.initEditor(); }, methods: { async initEditor() { const config = { document: { fileType: this.getFileExt(), key: new Date().getTime(), title: this.documentUrl.substring(this.documentUrl.lastIndexOf("/") + 1), url: this.documentUrl, }, documentType: this.getDocType(), editorConfig: { mode: "view", user: { id: this.$store.state.user.userId, name: this.$store.state.user.name } } }; new window.DocEditor("onlyoffice", config); }, getFileExt() { return this.documentUrl.split('.').pop(); }, getDocType() { const ext = this.getFileExt(); return ['doc','docx'].includes(ext) ? 'word' : ['xls','xlsx'].includes(ext) ? 'cell' : ['ppt','pptx'].includes(ext) ? 'slide' : 'word'; } } } </script> ``` 2. 在页面中调用组件 ```vue <template> <document-preview :document-url="fileUrl" /> </template> <script> import DocumentPreview from '@/components/DocumentPreview' export default { components: { DocumentPreview }, data() { return { fileUrl: 'http://your-domain.com/files/test.docx' } } } </script> ``` ### 四、关键配置注意事项 1. 跨域解决方案: ```nginx location / { proxy_pass http://docserver:8001; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; } ``` 2. 文件类型支持对照表: | 文件类型 | MIME类型 | 扩展名 | |----------|-------------------|--------------| | Word | application/msword| doc,docx | | Excel | application/vnd.ms-excel | xls,xlsx | | PPT | application/vnd.ms-powerpoint | ppt,pptx | ### 五、验证流程 1. 上传测试文档到若依文件服务器 2. 访问包含预览组件的页面 3. 检查控制台网络请求: - 应成功加载`api.js` - 返回HTTP 200状态码 4. 文档渲染应完整显示工具栏和内容 ### 常见问题处理 1. 出现`Document not found`错误: - 检查文档URL是否可公开访问 - 验证JWT配置(若启用安全模式) 2. 界面显示空白: - 确认容器端口映射正确 - 检查浏览器控制台是否有CORS错误 3. 中文乱码问题: ```dockerfile # 在Dockerfile中添加中文字体 RUN apt-get install -y fonts-wqy-zenhei ``` 集成后可实现类似以下效果: $$预览界面 = \frac{文档内容 \times 编辑器功能}{网络延迟 + 文件大小}$$ 该公式表示预览效果与文档内容和编辑器功能正相关,受网络环境和文件大小影响[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值