OnlyOffice：前端高性能Word、Excel、PPT、Pdf预览服务

这段时间重点在进行excel在线预览需求相关工作。期间在市面上对一些开源库展开了调研，比如微软的office预览服务以及LuckyExcel。之后还撰写了一篇分享文章。分享之后，经掘金的小伙伴提醒，了解到onlyOffice服务，于是便有了这篇分享内容。

OnlyOffice需要服务端支持，仅前端预览的话，请参考之前的分享文章

纵享丝滑，几千行数据预览一点也不卡

一、OnlyOffice 简介

OnlyOffice 是一个功能强大的在线办公套件，包括文档编辑器、电子表格编辑器和演示文稿编辑器。它支持多种文件格式，如 DOCX、XLSX、PPTX 等，并且可以与 Microsoft Office 格式完美兼容。OnlyOffice 提供了丰富的编辑功能，如格式设置、插入图片、表格、图表等，能够满足大多数办公场景的需求。

onlyOffice目前提供了三个版本

• 企业版
• 开发版
• 社区版

OnlyOffice 目前推出了三个版本，分别是企业版、开发版以及社区版。其中，企业版和开发版是收费版本，具体收费细则可在onlyOffice官网查询。社区版则具有独特的优势和一些限制。

社区版的优势

• 免费本地部署：社区版允许用户免费在本地进行部署，这对于一些对成本较为敏感的用户或小型团队来说是一个极具吸引力的特点。
• 活跃的社区支持：拥有一个活跃的社区，用户在这里可以交流使用经验、互相寻求帮助，还能分享自己的改进和创新成果，形成了一个良好的知识共享和互助环境。

社区版的限制

• 无法使用官方云服务：社区版无法使用 OnlyOffice 官方提供的云服务，这可能会对一些依赖云服务的用户造成不便。
• 协作人数受限：在同时编辑的场景下，社区版最多只能支持 20 人同时进行编辑，对于人数较多的团队协作可能会存在一定的局限性。

本篇文章将聚焦于社区免费版，详细介绍其安装和使用方法。

二、Docker 部署 OnlyOffice

1. 安装 Docker

首先，确保你的系统上已经安装了 Docker。如果没有安装，可以根据你的操作系统类型，从 Docker 官方网站下载并安装 Docker desktop。

如果电脑系统版本比较低的话，就需要下载历史版本的Docker desktop了

2. 拉取 OnlyOffice 镜像

在安装好 Docker 之后，打开终端或命令提示符，执行以下命令来拉取 OnlyOffice 镜像：

docker pull onlyoffice/documentserver

查看镜像：

docker images

或者通过Docker desktop软件中的image查看是否拉取成功：

3. 运行 OnlyOffice 容器

拉取镜像完成后，执行以下命令来运行 OnlyOffice 容器：

docker run -i -t -d -p 80:80 onlyoffice/documentserver

这个命令将在后台运行一个 OnlyOffice 容器，并将容器的 80 端口映射到主机的 80 端口。你可以根据自己的需要修改端口映射。

4.配置 OnlyOffice

打开浏览器，访问

http://localhost：80

，你将看到 OnlyOffice 的欢迎页面。这表示only Office服务启动成功

三、前端调用 OnlyOffice 服务

1. 通过script引入

将嵌入编辑器的目标 HTML 文件需要有一个占位符div标签，在这个标签中，所有关于编辑器参数的信息都将被传递：

<divid="placeholder"></div><scripttype="text/javascript"src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

包含可更改参数的页面代码如下所示：

const docEditor =newDocsAPI.DocEditor("placeholder", config);

其中 config 是一个对象：

config ={"document":{"fileType":"docx","key":"Khirz6zTPdfd7","title":"Example Document Title.docx","url":"https://example.com/url-to-example-document.docx"},"documentType":"word","editorConfig":{"callbackUrl":"https://example.com/url-to-callback.ashx"}};

具体config配置详情请访问官网config配置

2.通过相关框架npm库引入

npm官网搜索onlyOffice可以看到对应前端框架的相关库，包括react、vue、angular等：

本文以@onlyoffice/document-editor-react为示例介绍相关写法：

import { DocumentEditor } from "@onlyoffice/document-editor-react";

<DocumentEditor
  id="docxEditor"
  documentServerUrl="http://localhost:80"
  config={{
    document: {
         fileType: "xlsx",
         key: fileUrl.split("/").join("_").split("?").join("_"),
         title: "Example Document Title.xlsx",
         url: fileUrl,
         permissions: {
             copy: false,
             print: false,
             chat: false,
             comment: false,
             edit: false,
         }
    },
    documentType: "cell",
    editorConfig: {
        mode: "view",
        lang: "zh-CN",
        coEditing: {
              mode: 'strict',
              change: false
        },
        customization: {
            autosave: false,
            hideRightMenu: true,
            hideNotes: true,
            comments: false,
            compactHeader: true,
            hideRulers: true,
            help: false,
            toolbarHideFileName: false,
            toolbarNoTabs: false,
        },
        user: {
            name: editor.login.userName,
        }
     },
   }}
   events_onDocumentReady={onDocumentReady}
   onLoadComponentError={onLoadComponentError}
/>

上面的代码示例仅展示excel文件的预览，word、ppt等写法在document、documentType是不同的，具体config配置详情请访问官网config配置

注意事项：

• document中的key会绑定一个url,如果更换文件url地址，需要同步更换对应的key，在这里，我直接把url拿来使用了，并将url中的 “ / ？”进行了替换。
• 如果只是预览的话，可以将editorConfig中的mode设置为“view”
• 需要设置user 和 name，否则将开启匿名模式，会在页面打开时，弹出协作弹窗
• 更换url就会自动刷新页面，如果更改文件的url不变，可以在文件后面加时间戳参数

//更新预览constupdatePreview=()=>{
        dsReportCreator.createXlsx().then(({ excelUrl, buffer }: any)=>{// 将生成的 Excel 数据上传到 OSSconst fileName =`design_report_${editor.login.programeId}.xlsx`;const file =newFile([buffer], fileName,{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
            editor.login.ossHelper.uploadFile(fileName, file).then(({ url })=>{
                console.log("文件已上传到 OSS", url);setFileUrl(url +`?${Date.now()}`);}).catch((error)=>{
                console.error("上传失败", error);});});}

四、预览问题

1、文档安全令牌的格式不正确

这是因为onlyOffice4.2 版开始，为了保护文件的安全性，默认开启了JWT令牌，前端需要传入token才能进行预览，具体解决方案可以参考Python私教 博主分享的文章，我觉得讲的还是蛮清楚的。

或者启动服务是，禁用onlyOffice的JWT令牌验证：

docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver

如果文档安全性要求比较高的话，最好还是开启JWT验证

2、下载失败

下载失败的原因比较多，我仅仅列举我知道的：

• 部署的后端服务是否可以正常访问，网页打开localhost:80访问正常即可，端口号没指定的话也不一定是80
• 文件url是否是公网可访问的，可以直接网页打开文件rul，看看能不能正常下载
• document中的key是否是固定的，如果固定了，更换文件url的话，就会下载失败，因为一个key对应一个文件url

3、样式问题

社区版支持定制大部分的页面样式，但是不包括左上角的logo等信息，如果只是个人或者小范围内部使用的话，可以考虑写一个div覆盖掉上门的信息

如果商用、对外使用，建议使用专业版本

4、本地文件链接

花了一天时间去研究，也没研究明白

我的项目需求是对通过 excel.js 在前端生成的 Excel 文件进行在线预览，并且由于需要支持用户在本地更改参数后重新生成 Excel 文件进行预览。然而，通过 URL.createObjectURL 生成的本地链接似乎并不适用。

有大佬知道话可以指导一下==

5、第一次加载比较慢

给个参考方向

在网上找到的原因是第一次会从服务器下载字体包，特别是中文的字体包体积比较大，所以第一次加载就会很慢，后续浏览器缓存了字体包，加载就快了，官方给出的解决方案是删除这些字体包的使用就行了，docker安装的onlyoffice没找到在哪儿删除，还在研究中。。。

五、总结

OnlyOffice 是一款非常优秀的免费在线 Office 解决方案，它提供了强大的编辑功能、跨平台兼容性和安全可靠性。通过 Docker 部署 OnlyOffice 可以快速搭建一个在线办公环境，并且可以在前端页面中轻松调用 OnlyOffice 服务。如果你正在寻找一款免费的在线 Office 工具，不妨试试 OnlyOffice。