尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

在线协作文档编辑:kkFileView + OnlyOffice 实时编辑实操

在线协作文档编辑:kkFileView + OnlyOffice 实时编辑实操 在线协作文档编辑kkFileView OnlyOffice 实时编辑实操【免费下载链接】kkFileViewUniversal File Online Preview Project based on Spring-Boot项目地址: https://gitcode.com/GitHub_Trending/kk/kkFileView需要让多人同时改同一份文档时靠邮件来回传文件已经不够用了。本文用 kkFileView 托管文件与预览接入开源办公套件 OnlyOffice让文档在浏览器里直接打开编辑、改动实时同步。看完你能在本地跑通一条协作编辑链路。为什么是这个组合你把文档发出去改等收回来发现两人各改了一份版本对不上。你在 kkFileView 里预览没问题可要改一行字得下载、编辑、再上传一遍。你图省事接了第三方协作服务文档却存在别人服务器上合规过不去。两个组件各管一段kkFileView基于 Spring Boot 的通用文件在线预览项目负责文件托管、预览和对外提供访问地址原生支持 20 多个格式大类。OnlyOffice Document Server开源办公套件的文档服务器下称 Document Server负责浏览器里的实时协同编辑。衔接方式一句话kkFileView 把文件暴露成 HTTP 地址这个地址填进 OnlyOffice 编辑器的配置里编辑器拉取文件、渲染编辑界面保存时回传结果。全程数据都在你自己的服务器。场景仅 kkFileView接入 OnlyOffice 后查看文档支持支持编辑文档下载改完再传浏览器直接改多人同时改不支持光标与内容实时同步动手前环境自检依赖最低推荐CPU双核四核内存4 GB8 GBJDK215.0.0 版本硬性要求21容器运行时DockerDocker Compose端口8012kkFileView、8081OnlyOffice同左获取代码并自检git clone https://gitcode.com/GitHub_Trending/kk/kkFileView java -version # 需要 21 及以上 docker --version 注意如果你手上的旧环境还是 JDK 8升级前先换 JDK否则项目直接起不来。实操从配置到跑通第 1 步构建并启动 kkFileView验证预览目标让一个文件能通过 HTTP 地址访问到。cd kkFileView mvn clean package -DskipTests java -jar server/target/kkFileView-*.jar验证点浏览器打开http://localhost:8012/能加载首页把一个测试文件放进应用根目录的file/下再访问http://localhost:8012/相对路径/demo.docx能看到文件内容。易卡点首页上传默认是关闭的file.upload.disabletrue把文件直接放进file/目录即可不必走上传。第 2 步部署 OnlyOffice Document Server目标在 8081 端口有一个可用的编辑引擎。docker run -i -t -d -p 8081:80 --name oo-ds onlyoffice/documentserver验证点curl http://localhost:8081/healthcheck # 返回 OK易卡点容器首次启动初始化需要一两分钟期间 healthcheck 会拒绝连接等一等再试。第 3 步写编辑器页面把文件地址指向 kkFileView目标浏览器渲染出编辑界面且文档来源是 kkFileView 的地址。在你自己的任意 Web 目录下建edit.html引用 Document Server 的 api.jsapi.js 是 OnlyOffice 官方前端编辑器脚本script srchttp://localhost:8081/web-apps/apps/api/documents/api.js/script div idplaceholder styleheight:100%/div script var config { document: { url: http://服务器IP:8012/uploads/demo.docx, title: demo.docx, fileType: docx }, documentType: word, editorConfig: { lang: zh-CN }, callbackUrl: http://服务器IP:8082/onlyoffice/callback, events: new DocsAPI.DocEditor(placeholder, { onAppReady: renderEditor }) }; /script关键就一行document.url必须填容器能访问到的地址跨机器时用服务器 IP别写 localhost。callbackUrl是保存时 Document Server 回调你后端的接口初跑阶段可以先不管它用编辑器自带下载按钮把编辑后的文件取回来。验证点打开 edit.html出现带完整工具栏的 Word 编辑界面且文档正文成功从 kkFileView 加载出来。易卡点编辑器跑在浏览器里文件却从容器侧拉取浏览器和容器必须都能通那个地址两边不通是最高频的错误源。第 4 步验证多人实时协作目标确认实时是真的。用两个浏览器窗口其中一个用无痕窗口打开同一个 edit.html。验证点在 A 窗口敲字B 窗口几乎同步出现这些字页面右上角出现在线成员头像说明协作链路打通。易卡点如果两个窗口都只显示一个人在线检查两边打开的document.url是否完全一致。跑不通时看这里编辑器提示文件下载失败File download error→ 原因Document Server 容器访问不到document.url的地址最常见是填了 localhost。 → 解法换成容器能路由到的服务器 IP改完刷新页面重试。能编辑但改动没有保存→ 原因callbackUrl不可达或后端没实现回调处理。 → 解法先用编辑器下载手动取结果正式使用再实现回调接口Document Server 保存后会携带可下载文件地址回调该接口。提示 JWT 校验或 token 错误→ 原因local.json里配置的jwt.secret与编辑器签名用的密钥不一致。 → 解法两处配置成完全相同的字符串改完容器内配置后重启容器。kkFileView 打开后看不到文件、页面空白→ 原因默认禁用了上传file/目录下又没有文件。 → 解法把文件放进file/目录按相对路径访问或在 application.properties 里把file.upload.disable设为false。转换出的文档中文变成方块→ 原因容器内缺中文字体。 → 解法把 Noto Sans CJK 一类字体挂载进容器的字体目录重启容器。进阶可选在 Document Server 的local.json中启用jwt并设置secret编辑器侧用同一密钥签名防止文档地址被伪造拼进别人的编辑器。在 配置文件 中加kk.xlsxallowedittrue让 kkFileView 自身开启 xlsx 前端编辑适合单人轻量改动、不依赖 Document Server 的场景。用 Docker Compose 把 kkFileView 与 Document Server 一起编排固定 8012/8081 端口与挂载路径重启后可复现。小结kkFileView开源Spring Boot负责文件托管与预览覆盖 20 多个格式大类默认端口 8012。OnlyOffice Document Server 社区版负责协同编辑默认映射端口 8081同样开源。两者之间只隔一份编辑器配置文件全程不出内网。回调写回是最后要补齐的一环接上它编辑结果才会自动落盘。编辑器能打开只是第一步下一步是实现回调保存服务和多人权限控制那是另一个可以单独展开的主题。【免费下载链接】kkFileViewUniversal File Online Preview Project based on Spring-Boot项目地址: https://gitcode.com/GitHub_Trending/kk/kkFileView创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表