首页 >web前端 >js教程 >使用OnlyOffice将办公功能添加到您的Web应用程序

使用OnlyOffice将办公功能添加到您的Web应用程序

Christopher Nolan原创: 2025-02-10 11:19:14534浏览

本文是与OnlyOffice合作创建的。感谢您支持使SitietPoint成为可能的合作伙伴。 >每当我们发现自己试图为应用程序添加任何复杂功能时，就会出现：“我应该自己滚动吗？”除非您的目标是构建该功能，否则答案几乎总是直接的“否”。

>您需要的东西可以帮助您尽快获得MVP，而实现这一目标的最佳方法是使用一个完整的开箱即用解决方案，可以帮助您节省时间转弯，转化为节省开发成本。

>我假设您还在这里，因为上述引起了您的共鸣。因此，既然我们已经同步了，我想在本文中向您展示的是将OnlyOffice集成到您的Web应用程序中的容易。

钥匙要点

> OnlyOffice的开发人员版本允许广泛的自定义和集成到应用程序中，提供了将编辑品牌为您自己的“白色标签”选项。> >设置OnlyOffice涉及在本地安装Onlyoffice文档（文档服务器）并实现API请求以管理应用程序中的文档，并支持多种编程语言。

>实时协作在OnlyOffice中得到了支持，允许多个用户同时编辑文档，并将彼此的更改实时。
集成过程旨在简单明了，旨在帮助开发人员快速和经济有效地实现最低可行的产品（MVP），并提供充足的文档和社区支持以提供帮助。
什么是唯一的？
从他们的网站：
办公室套件有多个版本。在本文中，我们将使用开发人员版，因为我们想将编辑器集成到该应用程序中，后来将作为云服务或本地安装交付给许多用户。

如果您想在现有的同步和共享解决方案中使用OnlyOffice，则应查看Enterprise Edition。集成列表在这里。

>开发人员版

>开发人员版本不仅为您提供了足够的自由来将编辑器集成到应用程序中，而且还带有“白色标签”选项，可让您完全自定义编辑者在自己的品牌下使用它们。

>文档服务器集成

要与您的Web应用集成，您首先需要下载Onlyoffice Docs（用文档服务器打包）并在本地服务器上进行设置。

>安装后，您可以开始实现在服务器上处理文档的请求。 OnlyOffice为.NET，Java，Node.js，PHP，Python和Ruby提供了一些非常好的示例。

>您可以下载文档服务器和首选示例，并立即在计算机上尝试。

>我将演示如何开始集成到您的应用程序中。为此，我们将使用Node.js和Express的一个非常简单的示例。我不会详细介绍实现，我会列出裸露的骨头必需品，让您填写空白以构建一个可靠的可扩展系统。

我有一个具有以下结构的应用程序：>

>我们将使用公共/文档文件夹存储文档。 app.js文件是我们的Express App代码所在的位置，index.html是我们显示文档的位置。我在文档文件夹中删除了一个sample.docx文件。

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

公共/示例中的树文件是我们在“创建”新文件时复制的空白文件。

您稍后会看到的备份文件夹不仅可以帮助我们保留以前版本的备份，而且还可以帮助我们在修改文档后为文档生成唯一的标识符。 >让我们看一下app.js文件：

>我们正在做的是将文件作为localhost：3000/documents/fileName。

>我还领先于自己，并增加了Syncrequest，FS和BodyParser。这些目前不相关，但我们稍后会使用它们。

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

>提取文档

要显示可用的文档，我们需要获取所有文件名的列表并将其发送给客户。我们将为此创建 /文档路由：>

创建文档

>一开始我们只会有一个示例文档，但这一点都不有趣。让我们添加A /创建路由以帮助我们添加一些文件。我们只需将文件名取下并将相应的模板复制到带有新名称的公共/文档文件夹中：

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

删除文档

我们还需要一种删除文档的方法。让我们创建一个 /删除路由：

app<span>.post("/create", async (req<span>, res</span>) => {
</span>  <span>const ext = path.extname(req.query.fileName);
</span>  <span>const fileName = req.query.fileName;
</span>
  <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext);
</span>  <span>const newFilePath = path.join(__dirname, "public/documents", fileName);
</span>
  <span>// Copy the sample file to the documents folder with its new name.
</span>  <span>try {
</span>    fs<span>.copyFileSync(samplePath, newFilePath);
</span>    res<span>.sendStatus(200);
</span>  <span>} catch (e) {
</span>    res<span>.sendStatus(400);
</span>  <span>}
</span><span>});
</span>

这个超级简单。我们将删除文件并发送200个状态代码，以让用户知道一切都很好。否则，他们将获得400个状态代码。

保存文档

到目前为止，我们可以打开文档进行编辑，但是我们无法保存更改。让我们现在就这样做。我们将添加A /Track路由以保存我们的文件：

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

>这是一个棘手的问题，因为当文件由编辑器保存时，文档服务器将使用它。如您所见，我们正在返回“ {” error”：0}“，它告诉服务器一切都很好。

>编辑器关闭时，该文件的当前版本将在public/backups/filename-History/中备份，而当前时间则以毫秒为单位作为文件的名称。如您所见，我们将在前端使用该文件的名称。

> 在此示例中，我们每次保存新的备份时都会替换上一个备份。您将如何保留更多备份？

提取备份

>我们需要一种方法来获取特定文件的备份，因此我们添加了A /备份路由来处理以下操作：

在这里，我们确保存在该文件的备份文件夹，并返回该文件夹中所有备份文件的数组。是的，这将帮助您完成为单个文件保留更多备份的任务。我无法继续为您做所有的工作！

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

>在浏览器中打开一个文档

>我们将看到如何使用OnlyOffice文档在浏览器中直接打开文档。

首先，我们将创建一个简单的html文件：>

如您所见，该文件没有太多。我们有一个占位符，编辑将附有。然后是文档div，其中包含用于创建文件名称列表的控件和一个容器。使用OnlyOffice将办公功能添加到您的Web应用程序

在此下方，我们在文档服务器的JavaScript API上有脚本。请记住，您可能必须用文档服务器的位置替换主机。如果您用我给您的Docker命令安装了它，那么您应该很好。

最后但并非最不重要的一点是，有脚本标签，我们导入前端javascript和main.js文件，我们将在其中全局访问docsapi对象。

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

> css

>在进行编码之前，让我们与一些CSS结束布局，以使我们的应用程序更可用且不那么丑陋。将以下内容添加到main.css：

显示可用文档

>以此为止，我们准备开始编码前端。我们将首先列出文档文件夹中的文件。转到main.js并添加以下代码：

在顶部，我们正在获取查询参数，以找出是否打开文件。如果是，我们将调用EditDocument函数。不用担心，我们稍后会创建一个。

>如果我们不打开文件，我们要显示可用文件和控件的列表以创建更多。在ListDocuments中，我们首先确保隐藏占位符并清除列表，以确保我们重新创建它。然后，我们调用我们之前创建的 /文档路由以获取所有文件，通过它们迭代并创建相应的元素。我们将用文件名确定每个元素作为ID。这样，我们稍后可以轻松地检索它们。

请注意，我们正在调用AddDocumentHTML函数，稍后我们将重复使用以添加新文件。

对于这些文档中的每个文档，我们还调用了我们在底部定义的Opentocument，并且在cross符号上我们称为deleteDocument，我们将接下来定义。

删除文档

要删除我们的文档，如果用户确定在继续打电话 /删除路由并在该文件上进行核电，我们将提示他们。我们没有浪费对我们的API的另一个呼叫，而是检查返回的状态是否为200直接删除DOM元素：

创建文档

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

还记得我们在文档创建控件的单击中调用的功能吗？在这里，您要去：

非常简单。我们提示名称，将其称为 /创建路由为文件名参数，如果状态返回为200

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

>在OnlyOffice文档中打开文档

>现在我们需要定义editDocument函数。将以下代码添加到main.js：

因此，我们添加了三个功能。让我们首先关注最后两个。（我们将稍后讨论编辑文档。）

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

生成键也将通过生成密钥来为我们提供帮助。这是用于服务文档识别的唯一文档标识符。它的最大长度为20，没有特殊字符。这就是技巧：每次保存文档时都必须再生。你看到这要去哪里了吗？确切地！我们将从备份文件名中获利以生成我们的键。

> 如您所见

>如果您支持更多备份，该功能必须更改该功能？

[逃跑]

getDocumentType将返回文本，电子表格或演示文稿。只有此功能才能知道要打开哪个编辑。

editdocument是我们在这里的目的。这就是您一直在等待的。在这里，我们实例化文档对象传递了我们占位符DIV的ID和带有一堆配置的对象。>

> DOCEDITOR CONFIGURATION

到目前为止，我向您展示的是实例化文档的最低选项。您应该查看文档中的“高级参数”部分，以查看如何从所有不同选项中获利。同时，让我带您完成基础知识。

在顶部，我们有文档字段，该文档字段采用一个对象，该对象包含有关我们要打开的文档的信息。

> 然后，我们有DocumentType，正如我们之前看到的，可以是文本，电子表格或演示文稿。

>在那是EditorConfig对象，它使您可以设置诸如Spellcheck，unit和Zoom之类的内容。在这种情况下，我们只是使用callbackurl，该callbackurl是文档服务器将用来保存文件的 /跟踪路由的URL。

结论

>我们已经达到了终点，希望您能够学习如何与您的Web应用程序设置和集成。我们有很多抛弃的东西，例如权限，共享，自定义以及您可以使用的许多其他事情。

>

>希望您有足够的信息来不断改善您的产品，甚至可以灵感从头开始启动一个新项目。没有时间像现在这样。

好吧，我将在下一个见到你。同时，请继续编码并记住在您的情况下玩得开心！

经常询问的问题（常见问题解答）有关使用OnlyOffice

将办公室功能添加到您的Web应用程序

>如何将OnlyOffice集成到我现有的Web应用程序中？

将OnlyOffice集成到您现有的Web应用程序中涉及几个步骤。首先，您需要安装仅是OnlyOffice的核心的Onlyoffice Document Server。这可以使用推荐方法或手动的Docker完成。安装了文档服务器后，您可以使用仅Onewoffice API将其集成到Web应用程序中。 API提供了一组使用文档，电子表格和演示文稿的方法。您可以使用这些方法打开，编辑和保存文档在您的Web应用程序中。

在我的Web应用程序中使用仅使用仅限的文档是什么好处？它允许用户直接在应用程序中创建，查看和编辑文档，而无需下载或使用单独的程序。这可以大大提高用户体验和生产力。 OnlyOffice还支持实时协作，使多个用户可以同时处理同一文档。此外，OnlyOffice支持广泛的文档格式，包括Microsoft Office格式和OpenDocument格式。

我可以将OnlyOffice与React一起使用？ OnlyOffice API提供了一个React组件，您可以使用该组件将OnlyOffice集成到您的React应用程序中。该组件提供了一组使用文档的道具和方法。您可以使用这些道具和方法在您的React应用程序中打开，编辑和保存文档。

>我如何自定义单独的office接口？

>可以使用自定义对象进行自定义的唯一office接口由Onlyoffice API提供。此对象允许您更改Onewoffice接口的外观和行为。例如，您可以更改配色方案，隐藏或显示某些按钮，并启用或禁用某些功能。

是安全的吗？它使用SSL加密来保护运输中的数据，并可以控制谁可以访问您的文档。此外，OnlyOffice是开源的，这意味着其代码可公开可供审查和审查。

> OnlyOffice支持实时协作吗？是的，BeanseOffice支持实时协作。这意味着多个用户可以同时在同一文档上工作，从而实时看到对方的变化。这可以极大地提高团队合作和生产力。

>我可以与其他JavaScript框架一起使用OnlyOffice？

>是的，只能与其他JavaScript框架（例如Angular and Vue）一起使用。 OnlyForce API为这些框架提供了组件，使您可以将OnlyOffice集成到您的Angular或Vue应用程序中。

>

>我可以在OnlyOffice中使用哪些类型的文档？文档格式，包括Microsoft Office格式（例如.docx，.xlsx和.pptx）和Opendocument格式（例如.odt，.ods和.odp）。它还支持其他格式，例如.txt和.csv。

>我可以在移动设备上使用OnlyOffice吗？

>是的，只有Onlyoffice响应迅速并且可以在移动设备上使用。这意味着用户可以在其智能手机或平板电脑上创建，查看和编辑文档，从而在设备上提供无缝的体验。

是否有一个社区的OnlyOffice Developers？ Beansoffice开发人员的社区。该社区为开发人员提供了一个论坛，以提出问题，分享技巧和窍门以及在项目上进行协作。对于使用OnlyOffice开发的任何人来说，这都是一个很好的资源。

以上是使用OnlyOffice将办公功能添加到您的Web应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Local Authentication Using Passport in Node.js下一篇：Practical Ways to Advance Your TypeScript Skills

查看更多