ONLYOFFICEのフォームをウェブページに埋め込む方法

ウェブサイトにオンラインフォームを簡単に追加し、入力やPDFのダウンロードができるようにすることができます。その方法をこの記事でご紹介します。

はじめに

ONLYOFFICEの新しいフォームについては、すでにご存知かと思います。そうでない場合は、ここで簡単にご紹介します。ONLYOFFICE Docsのバージョン7.0から、オンラインフォームの作成、編集、コラボレーション、他のユーザーによる記入、PDFとしてのフォーム保存が可能になりました。

ONLYOFFICEフォームでは、主に2つのフォーマットを使用します。DOCXFは、空白または既存のDOCXファイルからフォームテンプレートを作成するためのものです。OFORMフォーマットは、作成されたフォームに記入するために使用されます。

youtu.be

ウェブサイトから編集用のDOCXFを開く方法

ONLYOFFICEドキュメントサーバーの index.html ファイルを開いてみてください。そうすると、Document Server APIに接続します。フォームテンプレートを開くための設定パラメータを指定する必要があります。

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> 
   // Specify the path to the API JavaScript file.
<button onclick="open_form_template()">Open Form Template</button> 
   // Add a button to open the form.
<div id="placeholder"></div> 
   // Add the element where the editor will be opened.
<script>
function open_form_template() {
    // Close the editor in case it is open.
    if (this.docEditor) {
        this.docEditor.destroyEditor()
    }
    // Create the full URL address to the form template you need to open.
    const url = window.location.protocol + "//" +
    window.location.hostname + “:” + window.location.port + ”/” + filename + ”.docxf”;
    // Add the key to identify the file for co-editing.
    const key = filename + ”.docxf”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “docxf”,
            “key”: key,
            “title”: “Form Template”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

編集ができたら、フォームのテンプレートが編集用に開かれます。このファイルを編集した後、フォームそのものを取得することができます。これをするには、「フォームとして保存」ボタンをクリックしてください。

ウェブサイトから記入するためのOFORMの開き方

入力用のフォームを開くためのボタンを追加する必要があります。それから、open_form_template()関数を追加します。

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> 
   // Specify the path to the API JavaScript file.
<button onclick="open_form()">Open Form</button> 
   // Add a button to open the form.
<div id="placeholder"></div> 
   // Add the element where the editor will be opened.
<script>
function open_form_template() {
    // Close the editor in case it is open.
    if (this.docEditor) {
        this.docEditor.destroyEditor()
    }
   // Create the full URL address to the form you need to open.
    const url = window.location.protocol + "//" +
    window.location.hostname + ”:” + window.location.port + ”/” + filename + ”.oform”;
    const key = filename + ”.oform”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “oform”,
            “title”: “Form”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

キーフィールドはエディタの設定に渡されないことを考慮に入れてください。このフィールドは自動的に乱数として生成されます。これはフォームを開くすべてのセッションを独立させることを可能にします。つまり、OFORMファイルでのコラボレーションは無効になります。そのため、誰でも他の人に邪魔されることなく、フォームを開いて記入することができます。

一旦完了すると、フォームを開いて記入することができます。フィールドに入力した後（必須項目は赤枠でハイライトされています）、PDFファイルとしてダウンロードできます。そうするには、「PDFとして保存」ボタンをクリックします。