使用OnlyOffice將辦公功能添加到您的Web應用程序-js教程-PHP中文網

首頁

web前端

js教程

使用OnlyOffice將辦公功能添加到您的Web應用程序

Christopher Nolan

Feb 10, 2025 am 11:19 AM

使用OnlyOffice將辦公功能添加到您的Web應用程序

本文是與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

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles