OlyOfficeを使用してWebアプリにオフィス機能を追加します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

OlyOfficeを使用してWebアプリにオフィス機能を追加します

Christopher Nolan

Feb 10, 2025 am 11:19 AM

OlyOfficeを使用してWebアプリにオフィス機能を追加します

この記事は、OlyOfficeと協力して作成されました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 アプリに複雑な機能を追加しようとしていることに気付いたときはいつでも、「自分のものを転がすべきですか？」という疑問が生じます。そして、あなたの目標がその機能を構築することでない限り、答えはほとんど常にまっすぐな「いいえ」です。

必要なのは、できるだけ早くMVPに到達するのに役立つものであり、それを達成するための最良の方法は、時間を節約するのに役立つ完全なボックスアウトボックスソリューションを使用することです。ターン、開発コストの節約に変換されます

上記があなたと共鳴するので、あなたはまだここにいると思います。だから、私たちが同期しているので、この記事であなたに見せたいのは、あなたのWebアプリにOnlyOfficeを統合するのがどれほど簡単かということです。

キーテイクアウト

OnlyOfficeは、Microsoft OfficeおよびOpenDocumentフォーマットと非常に互換性のある包括的なオフィススイートを提供します。これは、ドキュメント、スプレッドシート、およびプレゼンテーション管理のためにWebアプリケーションに直接統合できます。

onlyOfficeの開発者版では、編集者を独自のものとしてブランディングするための「ホワイトラベル」オプションを提供するための「ホワイトラベル」オプションを提供します。

の唯一のオフィスのセットアップでは、唯一のオフィスドキュメント（ドキュメントサーバー）をローカルにインストールし、複数のプログラミング言語をサポートして、アプリ内のドキュメントを管理するためのAPIリクエストを実装します。

OnlyOffice統合により、Webアプリ内でドキュメントの作成、編集、削除、追跡が可能になり、外部アプリケーションを必要とせずにユーザーの相互作用と生産性が向上します。

統合プロセスは、開発者が最小限の実行可能な製品（MVP）を迅速かつ費用対効果に達成できるようにすることを目的としており、十分なドキュメントとコミュニティサポートを支援できるように設計されています。
唯一のオフィスとは？
OnlyOfficeは、Microsoft OfficeおよびOpenDocumentファイル形式と非常に互換性があり、利用可能な最も機能が豊富なオフィススイートを提供しています。 Webアプリケーションから直接、ドキュメント、スプレッドシート、プレゼンテーションを表示、編集、共同作業で編集し、共同作業します。
オフィススイートにはいくつかのエディションがあります。この記事では、デベロッパーエディションを使用します。これは、エディターをアプリに統合し、後でクラウドサービスまたはオンプレミスインストールとして多くのユーザーに配信されるためです。
Developer Edition

Developer Editionは、アプリ内に編集者を統合するのに十分な自由を提供するだけでなく、編集者を完全にカスタマイズして独自のブランドで使用できる「ホワイトラベル」オプションも付属しています。
ドキュメントサーバーの統合

Webアプリと統合するには、最初に唯一のOfficeドキュメント（ドキュメントサーバーとしてパッケージ化されている）をダウンロードし、ローカルサーバーにセットアップする必要があります。
インストールした後、サーバー上のドキュメントを処理するリクエストの実装を開始できます。 OnlyOfficeは、.NET、Java、node.js、PHP、Python、Rubyの非常に素晴らしい例をいくつか提供しています。
ドキュメントサーバーとお好みの例をダウンロードして、マシンですぐに試してみることができます。

アプリに統合し始める方法を示します。この目的のために、node.jsとExpressを使用して非常に簡単な例を使用します。実装についてはあまり詳しく説明しません。裸の骨の必需品をレイアウトし、堅牢でスケーラブルなシステムを構築するために空白を埋めることができます。
次の構造を持つアプリがあります：

公開/ドキュメントフォルダーを使用してドキュメントを保存します。 App.jsファイルは、Express Appコードがある場所であり、index.htmlはドキュメントを表示する場所です。テスト目的でドキュメントフォルダーにsample.docxファイルをドロップしました。
public/ samples/内部のツリーファイルは、新しいファイルを「作成」するときにコピーする空白のファイルです。
バックアップフォルダーは、後で見るように、以前のバージョンのバックアップを維持するだけでなく、ドキュメントを変更した後のドキュメントの一意の識別子を生成するのにも役立ちます。
```
- 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
```
public/css/main.cssおよびpublic/javascript/main.jsファイルは、index.htmlによって使用されます。後でそれを調べます。

app.jsファイル：
を見てみましょう

私たちがしていることは、ファイルをlocalhost：3000/documents/filenameとして提供することです。
また、私は自分よりも先を行き、SyncRequest、FS、およびBodyParserを追加しました。これらは現在関連していませんが、後で使用します。
ドキュメントの取得

利用可能なドキュメントを表示するには、すべてのファイル名のリストを取得し、クライアントに送信する必要があります。これのために /documentsルートを作成します：
```
const express = require('express');
const bodyParser = require("body-parser");
const path = require('path');
const fs = require('fs');
const syncRequest = require('sync-request');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static("public"));

app.get("/", (req, res) => {
 res.sendFile(path.join(__dirname, "/index.html"));
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`App listening on http://localhost:${port}`));

```
ドキュメントを作成

最初はサンプルドキュメントを用意しますが、それはまったく楽しいことではありません。いくつかのファイルを追加するのを支援するために、A /Create Routeを追加しましょう。ファイル名を取り、対応するテンプレートを新しい名前で公開/ドキュメントフォルダーにコピーします。

ドキュメントを削除
また、ドキュメントを削除する方法も必要です。 /deleteルートを作成しましょう：
```
app.get("/documents", (req, res) => {
 const docsPath = path.join(__dirname, "public/documents");
 const docsPaths = fs.readdirSync(docsPath);

 const fileNames = [];

 docsPaths.forEach(filePath => {
 const fileName = path.basename(filePath);
 fileNames.push(fileName);
 });

 res.send(fileNames);
});

```
これは非常にシンプルです。ファイルを削除し、200ステータスコードを送信して、ユーザーにすべてがうまくいったことをユーザーに知らせます。それ以外の場合は、400ステータスコードが取得されます。

ドキュメントを保存

これまでのところ、編集のためにドキュメントを開くことができますが、変更を保存する方法はありません。今それをしましょう。ファイルを保存するには、 /トラックルートを追加します：
```
- 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
```
これは、ファイルがエディターによって保存されているときにドキュメントサーバーで使用されるため、トリッキーなものです。ご覧のとおり、「{"エラー"：0}」を返しています。これは、すべてが良いことをサーバーに伝えます。

エディターが閉じられている場合、ファイルの現在のバージョンは、ファイルの名前としてミリ秒単位で現在の時間をパブリック/バックアップ/filename-historyでバックアップします。ご覧のとおり、フロントエンドの後半でファイルの名前を使用します。
この例では、新しいバックアップを保存するたびに以前のバックアップを交換しています。より多くのバックアップを保持するにはどうすればよいですか？

バックアップの取得

特定のファイルのバックアップを取得する方法が必要になるので、これを処理するためのA /Backupsルートを追加しています。

ここで、そのファイルのバックアップフォルダーが存在することを確認し、そのフォルダー内のすべてのバックアップファイルの配列を返します。はい、これは、単一のファイルのバックアップを増やすというタスクに役立ちます。私はあなたのためにすべての仕事を続けることはできません！
```
const express = require('express');
const bodyParser = require("body-parser");
const path = require('path');
const fs = require('fs');
const syncRequest = require('sync-request');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static("public"));

app.get("/", (req, res) => {
 res.sendFile(path.join(__dirname, "/index.html"));
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`App listening on http://localhost:${port}`));

```
ブラウザでドキュメントを開く

OnlyOfficeドキュメントを使用してブラウザで直接編集するためにドキュメントを開く方法を確認します。

最初に、簡単なHTMLファイルを作成します：

ご覧のとおり、このファイルにはあまりありません。編集者が添付されるプレースホルダーDIVがあります。次に、ドキュメントDivがあります。これには、ファイル名のリストのドキュメントとコンテナを作成するコントロールが含まれています。その下には、ドキュメントサーバーのJavaScript APIを備えたスクリプトがあります。ホストをドキュメントサーバーの場所に置き換える必要がある場合があることに注意してください。私があなたに与えたdockerコマンドでそれをインストールした場合、あなたは行くのが良いはずです。
最後になりましたが、最後になりましたが、スクリプトタグがあり、フロントエンドJavaScriptとMain.jsファイルをインポートし、DocSAPIオブジェクトにグローバルにアクセスできます。
```
app.get("/documents", (req, res) => {
 const docsPath = path.join(__dirname, "public/documents");
 const docsPaths = fs.readdirSync(docsPath);

 const fileNames = [];

 docsPaths.forEach(filePath => {
 const fileName = path.basename(filePath);
 fileNames.push(fileName);
 });

 res.send(fileNames);
});

```
css

コーディングに到達する前に、レイアウトをいくつかのCSSでまとめて、アプリをより使いやすく、ugい低いようにしましょう。 main.cssに次のものを追加します：

利用可能なドキュメントを表示

それが邪魔にならないので、フロントエンドのコーディングを開始する準備ができています。まず、ドキュメントフォルダーにファイルをリストすることから始めます。 main.jsに移動して、次のコードを追加します：

ここでは、クエリパラメーターを取得して、ファイルを開いているかどうかを確認します。もしそうなら、editdocument関数を呼び出します。心配しないでください、後でそれを作成します。
```
app.post("/create", async (req, res) => {
 const ext = path.extname(req.query.fileName);
 const fileName = req.query.fileName;

 const samplePath = path.join(__dirname, "public/samples", "new" + ext);
 const newFilePath = path.join(__dirname, "public/documents", fileName);

 // Copy the sample file to the documents folder with its new name.
 try {
 fs.copyFileSync(samplePath, newFilePath);
 res.sendStatus(200);
 } catch (e) {
 res.sendStatus(400);
 }
});

```
ファイルを開いていない場合は、利用可能なファイルとコントロールのリストを表示してさらに作成します。 ListDocumentsでは、最初にプレースホルダーを隠し、リストをクリアして、それを新たに作成することを確認します。次に、すべてのファイルを取得し、それらを繰り返し、対応する要素を作成するために、以前に作成した /ドキュメントルートを呼び出します。 Filenameを使用して各要素をIDとして識別します。このようにして、後で簡単に検索できます。

addocumenthtml関数を呼び出していることに注意してください。これは後で再利用して新しいファイルを追加します。
これらの各ドキュメントについては、下部に定義したOpenDocumentも呼び出し、次に定義します。
ドキュメントの削除

ドキュメントを削除するには、先に進んで /削除ルートを呼び出してそのファイルで核に移動する前に、ユーザーが確信している場合はプロンプトが表示されます。 APIへの別の呼び出しを無駄にする代わりに、DOM要素を直接削除するために、返されたステータスが200であることを確認しています。

ドキュメントを作成
```
- 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
```
ドキュメント作成コントロールのオンクリックで呼び出していた関数を覚えていますか？ここに行きます：

非常にシンプルです。名前を促し、 /createルートをファイル名パラメーターとして呼び出し、ステータスが200として戻ってきた場合、adddocumenthtmlを呼び出してdom要素を直接追加します。
OnlyOffice docsでドキュメントを開く
```
const express = require('express');
const bodyParser = require("body-parser");
const path = require('path');
const fs = require('fs');
const syncRequest = require('sync-request');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static("public"));

app.get("/", (req, res) => {
 res.sendFile(path.join(__dirname, "/index.html"));
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`App listening on http://localhost:${port}`));

```
editdocument関数を定義する必要があります。次のコードをmain.jsに追加します：

したがって、3つの関数を追加しました。最後の2つに焦点を当てましょう。（editdocumentについては、すぐに説明します。）

GenerateKeyは、キーを生成することでも支援します。これは、サービスによるドキュメント認識に使用される一意のドキュメント識別子です。最大長は20で、特殊文字はありません。そして、ここにトリックがあります。ドキュメントが保存されるたびに再生する必要があります。これがどこに向かっているのかわかりますか？その通り！バックアップファイル名から利益を得て、キーを生成します。ご覧のとおり、キーを生成するには、唯一のバックアップを取得し、その名前を使用するか、その他の時間を数ミリ秒で取得していない場合は、その名前を使用しています。
```
app.get("/documents", (req, res) => {
 const docsPath = path.join(__dirname, "public/documents");
 const docsPaths = fs.readdirSync(docsPath);

 const fileNames = [];

 docsPaths.forEach(filePath => {
 const fileName = path.basename(filePath);
 fileNames.push(fileName);
 });

 res.send(fileNames);
});

```
より多くのバックアップをサポートする場合、その機能で何を変更する必要がありますか？
[逃げる]

getDocumentTypeは、テキスト、スプレッドシート、またはプレゼンテーションのいずれかを返します。オフィスのみがこれを必要として、どのエディターを開くかを知る必要があります
editdocumentは私たちがここにいるものです。これはあなたがずっと待っていたものです。ここでは、プレースホルダーdivのIDと構成の束を持つオブジェクトを渡すDoceditorオブジェクトをインスタンス化します。

doceditor構成

これまでに私があなたに示したのは、Doceditorをインスタンス化するために必要な最小限のオプションです。ドキュメントの高度なパラメーターセクションをチェックして、さまざまなオプションから利益を得る方法を確認する必要があります。それまでの間、私はあなたを基本を通して連れて行ってください。
上部には、開きたいドキュメントに関する情報を含むオブジェクトを取得するドキュメントフィールドがあります。
それから、documentTypeがあります。これは、以前に見たように、テキスト、スプレッドシート、またはプレゼンテーションのいずれかにすることができます。 editorconfigオブジェクトです。これにより、スペルチェック、ユニット、ズームなどを設定できます。この場合、Callbackurlを使用しています。これは、ドキュメントサーバーがファイルを保存するために使用する /トラックルートへのURLです。
結論

私たちは終わりに到達しました、そして、あなたはあなたのWebアプリとのOnlyOfficeをセットアップして統合する方法を学んだことを願っています。許可、共有、カスタマイズ、その他多くのことができることなど、私たちが除外していることがたくさんあります。
製品を改善し続けるのに十分な情報、あるいは新しいプロジェクトをゼロから開始するためのインスピレーションさえあることを願っています。現在のような時間はありません。

さて、次のものでお会いしましょう。それまでの間、コーディングを続けて、あなたがそれにいる間は楽しんでください！

Offerofficeを使用してWebアプリにオフィス機能を追加することについてのよくある質問（FAQ）
既存のWebアプリケーションにOfficeのみを統合するにはどうすればよいですか？

既存のWebアプリケーションにOfficeを統合するには、いくつかのステップが含まれます。まず、OnlyOfficeのコアである唯一のOffice Document Serverをインストールする必要があります。これは、Dockerを使用して実行できます。これは推奨される方法であるか、手動で行うことができます。ドキュメントサーバーがインストールされたら、唯一のOffice APIを使用してWebアプリケーションに統合できます。 APIは、ドキュメント、スプレッドシート、およびプレゼンテーションを使用するための一連のメソッドを提供します。これらのメソッドを使用して、Webアプリケーションにドキュメントを開き、編集、保存できます。ユーザーは、ドキュメントをアプリケーションで直接作成、表示、編集することができます。これにより、ユーザーエクスペリエンスと生産性が大幅に向上します。また、Officeのみがリアルタイムのコラボレーションをサポートしており、複数のユーザーが同じドキュメントで同時に作業できるようにします。さらに、OnlyOfficeは、Microsoft OfficeフォーマットやOpenDocument形式など、幅広いドキュメント形式をサポートしています。

Only OfficeをReactで使用できますか？

はい、OnlyOfficeはReactで使用できます。唯一のオフィスAPIは、OnlyOfficeをReactアプリケーションに統合するために使用できるReactコンポーネントを提供します。このコンポーネントは、ドキュメントを使用するための一連の小道具と方法を提供します。これらの小道具と方法を使用して、Reactアプリケーションにドキュメントを開き、編集、保存できます。唯一のオフィスAPIによって提供されます。このオブジェクトを使用すると、唯一のオフィスインターフェイスの外観と動作を変更できます。たとえば、配色を変更したり、特定のボタンを隠したり表示したり、特定の機能を有効または無効にしたりできます。 SSL暗号化を使用して輸送中のデータを保護し、誰があなたのドキュメントにアクセスできるかを制御できます。さらに、Officeのみがオープンソースです。つまり、そのコードはレビューと精査のために公開されています。これは、複数のユーザーが同じドキュメントで同時に作業できることを意味し、お互いのリアルタイムでの変更を見ることができます。これにより、チームワークと生産性が大幅に向上する可能性があります。

他のJavaScriptフレームワークとのみOfficeを使用できますか？唯一のオフィスAPIは、これらのフレームワークにコンポーネントを提供し、OnlyOfficeをAngularまたはVueアプリケーションに統合できます。 Microsoft Officeフォーマット（.docx、.xlsx、.pptxなど）およびOpendocument形式（.odt、.ods、.odpなど）を含むドキュメント形式。また、.txtや.csvなどの他の形式もサポートしています。

モバイルデバイスでのみOfficeを使用できますか？これは、ユーザーがスマートフォンまたはタブレットでドキュメントを作成、表示、編集できることを意味し、デバイス全体でシームレスなエクスペリエンスを提供します。 OffineOffice開発者向けのコミュニティ。このコミュニティは、開発者が質問をしたり、ヒントやコツを共有したり、プロジェクトで協力したりするフォーラムを提供します。唯一のオフィスで開発する人にとって素晴らしいリソースです。

以上がOlyOfficeを使用してWebアプリにオフィス機能を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 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テクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。