OnlyOffice：前端高性能Word、Excel、PPT、Pdf预览服务
这段时间重点在举行excel在线预览需求相干工作。期间在市面上对一些开源库睁开了调研，比如微软的office预览服务以及LuckyExcel。之后还撰写了一篇分享文章。分享之后，经掘金的小同伴提示，相识到onlyOffice服务，于是便有了这篇分享内容。OnlyOffice必要服务端支持，仅前端预览的话，请参考之前的分享文章
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZTJhYWRhYjljYThkNDBjMDgzNDg0OWZiYmNhYTUzYzkucG5n
纵享丝滑，几千行数据预览一点也不卡
一、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
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMmEzZGE4OGYxOTM5NDczNWIxNTJmYmU4NzE0MjE0NDkucG5n
大概通过Docker desktop软件中的image查察是否拉取乐成：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTg3MTNkNTFhMWY3NDU0Mjk1NTc1MWFkOTExZjIyMDAucG5n
3. 运行 OnlyOffice 容器
拉取镜像完成后，实行以下下令来运行 OnlyOffice 容器：
docker run -i -t -d -p 80:80 onlyoffice/documentserver
这个下令将在配景运行一个 OnlyOffice 容器，并将容器的 80 端口映射到主机的 80 端口。你可以根据本身的必要修改端口映射。
4.设置 OnlyOffice
打开欣赏器，访问 http://localhost：80，你将看到 OnlyOffice 的接待页面。这体现only Office服务启动乐成
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYTE0YWQ0MTBjOTI0NDk0M2I2ODNlZWFjMmFkODkwYzcucG5n
三、前端调用 OnlyOffice 服务
1. 通过script引入
将嵌入编辑器的目标 HTML 文件必要有一个占位符div标签，在这个标签中，全部关于编辑器参数的信息都将被通报：
<div id="placeholder"></div>
<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
包罗可更改参数的页面代码如下所示：
const docEditor = new DocsAPI.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等：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMjk1MDUyMGRiMTJiNDgwNWE5ZDVjNmEwN2I0NmEyOGEucG5n
本文以@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中的 “ / ？”举行了更换。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYmVkMWVkNTJiNTQyNGIzNjhjNGI4NzQwODQ2ZjJiNDcucG5n
[*] 假如只是预览的话，可以将editorConfig中的mode设置为“view”
[*] 必要设置user 和 name，否则将开启匿名模式，会在页面打开时，弹出协作弹窗
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMWI2MTQxY2I5NGZjNDIwZDhhMmFkMWVhOTYxMWIxMTYucG5n
[*] 更换url就会自动革新页面，假如更改文件的url稳固，可以在文件背面加时间戳参数
//更新预览
const updatePreview = () => {
dsReportCreator.createXlsx().then(({ excelUrl, buffer }: any) => {
// 将生成的 Excel 数据上传到 OSS
const fileName = `design_report_${editor.login.programeId}.xlsx`;
const file = new File(, 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、文档安全令牌的格式不精确
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMThlMjY5MTA4OGQxNDY4Zjg5YzJiYmVmMjQxYjZkYjMucG5n
这是由于onlyOffice4.2 版开始，为了掩护文件的安全性，默认开启了JWT令牌，前端必要传入token才气举行预览，具体办理方案可以参考Python私教 博主分享的文章，我以为讲的还是蛮清楚的。
大概启动服务是，禁用onlyOffice的JWT令牌验证：
docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver
假如文档安全性要求比力高的话，最好还是开启JWT验证
2、下载失败
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYWFlZGI2YjNlODNmNGU0OGFmMzQ2ZjRmOGZlY2RiZTgucG5n
下载失败的缘故起因比力多，我仅仅摆列我知道的：
[*]摆设的后端服务是否可以正常访问，网页打开localhost:80访问正常即可，端标语没指定的话也不肯定是80
[*]文件url是否是公网可访问的，可以直接网页打开文件rul，看看能不能正常下载
[*]document中的key是否是固定的，假如固定了，更换文件url的话，就会下载失败，由于一个key对应一个文件url
3、样式题目
社区版支持定制大部分的页面样式，但是不包罗左上角的logo等信息，假如只是个人大概小范围内部利用的话，可以思量写一个div覆盖掉上门的信息
假如商用、对外利用，发起利用专业版本
4、本地文件链接
花了一天时间去研究，也没研究明确
我的项目需求是对通过 excel.js 在前端天生的 Excel 文件举行在线预览，而且由于必要支持用户在本地更改参数后重新天生 Excel 文件举行预览。然而，通过 URL.createObjectURL 天生的本地链接好像并不实用。
有大佬知道话可以引导一下==
5、第一次加载比力慢
给个参考方向
在网上找到的缘故起因是第一次会从服务器下载字体包，特别是中文的字体包体积比力大，以是第一次加载就会很慢，后续欣赏器缓存了字体包，加载就快了，官方给出的办理方案是删除这些字体包的利用就行了，docker安装的onlyoffice没找到在哪儿删除，还在研究中。。。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvM2QyMThiYzkwNTRiNGYxMDk3MWJlOWE2YzRmOTE0YjMucG5n
五、总结
OnlyOffice 是一款非常良好的免费在线 Office 办理方案，它提供了强大的编辑功能、跨平台兼容性和安全可靠性。通过 Docker 摆设 OnlyOffice 可以快速搭建一个在线办公情况，而且可以在前端页面中轻松调用 OnlyOffice 服务。假如你正在探求一款免费的在线 Office 工具，不妨试试 OnlyOffice。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]