Excel、PDF、ワールドドキュメントソリューションの Web ブラウザーオンラインプレビュー

ご存知のとおり、Excel やワールドドキュメントなどのファイルは Web ブラウザで直接プレビューできません。一部のブラウザでは PDF プレビューが開きますが、他のブラウザではダウンロードページにジャンプします。一貫性のない動作も開発者にとって頭痛の種です。

今回は、OA アプリケーションやプッシュ通知アプリケーションの開発に役立つ、オフィスファイルのオンラインプレビューを実現するソリューションを紹介します。プラグインonlyofficeを使ってオンラインプレビュー機能を実現！

動作環境：centOS + Pagodaパネル

最初のステップは docker をダウンロードすることです

Pagoda パネルの [ソフトウェアストア] でアプリケーションドッカーを見つけ、ドッカーとドッカーマネージャーをインストールして、パネルのホームページに配置します。このようにして、パネルのホームページで Docker Manager を見つけることができます。

ステップ 2 :onlyoffice イメージをインストールする

Pagoda ホームページで Docker Manager をクリックし、公式イメージリポジトリで documentServer を検索してインストールします。

これをプルすると、Docker イメージ内にonlyoffice イメージが表示されます。

コマンド docker Inspection [images_id] を実行したところ、イメージがポート 80 を公開していることがわかりました。これはイメージアクセスに使用されるポートで、コンテナを起動するときにポートをマッピングすることで正常にアクセスできます。

ステップ 3: コンテナーを開始する

これは、コマンドラインで次のコマンドを使用して実行できます。

docker run -it --name documentServer -d -p 9090:80 onlyoffice/documentserver

このうち、 -it は対話型ターミナルを使用することを意味し、ubuntu はベースイメージ、bash は実行するコマンドです。このコマンドを実行すると、Docker が自動的にコンテナを作成し、その中で bash ターミナルを開きます。この時点で、コンテナー内でさまざまな bash コマンドを実行できるため、対話型操作が必要なユーザーにとっては非常に便利です。

-d オプションは、コンテナをデーモンとして実行するように Docker に指示します。-d オプションを使用すると、Docker はコンテナをバックグラウンドで実行します。

-p はポートマッピングを示します。ローカルポート 9090 (ユーザーが指定可能) を、onlyoffice イメージのポート 80 にマッピングします。

起動に成功すると、コンテナ ID が返されます。

ステップ 4.onlyoffice をテストする

localhost:9090 にアクセスし、以下の画面が表示されれば、onlyoffice サービスは正常に開始されています。

正常に起動すると、 http://localhost:9090/web-apps/apps/api/documents/api.jsからアクセスできる js ファイルが提供され、フロントエンドはそのファイルを参照し、次のように構成できます。 Office ファイルをオンラインでプレビューします。

ステップ 5: フロントエンドでサービスを呼び出す

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="placeholder"></div>
<script type="text/javascript" src="http://localhost:9090/web-apps/apps/api/documents/api.js"></script>
<script>

    var docEditor = new DocsAPI.DocEditor("placeholder", {
        "document": {
            "fileType": "docx",
            "permissions": {
                "edit": false,
            },
            "key": "C8D7FB890BAC496FB0D27B163EDB88BDAA",
            "title": "zf张飞.docx",
            "url": "你需要预览的文件地址",
        },
        "height": "1000px",
        "width": "100%"
    });

</script>
</body>
</html>

この時点で、オンラインプレビューが利用可能になります。

onlyoffice git アドレス: https://github.com/ONLYOFFICE/DocumentServer