ONLYOFFICE API 文档 - 将表单嵌入网页

如何从网站打开DOCXF进行编辑

要在您的网站上打开DOCXF格式的在线表单进行编辑，请执行以下步骤：

查找并打开ONLYOFFICE文档的 index.html 文件。

通过指定API JavaScript文件的路径将其连接到Document Server API：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

添加 button 元素以打开表单模板：

<button onclick="open_form_template()">打开表单模板</button>

在将打开编辑器的位置添加 div 元素：
```
<div id="placeholder"></div>
```
如果编辑器是打开的，添加脚本以关闭编辑器：
```
if (this.docEditor)
    { this.docEditor.destroyEditor()
}
```

创建需要打开的表单模板的完整URL地址：

const url = "https://example.com/url-to-example-document.docxf";

创建key以标识要共同编辑的文件：
```
const key = filename + ".docxf";
```

使用要打开的文档的配置，添加初始化文档编辑器的脚本，并在placeholder元素中打开编辑器：

this.docEditor = new DocsAPI.DocEditor("placeholder",
{
    "document": {
        "fileType": "docxf",
        "key": key,
        "title": "Form Template",
        "url": url
    },
    "documentType": "word"
});

完整的代码片段如下所示：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_form_template()">Open Form Template</button>
<div id="placeholder"></div>
<script>
    function open_form_template() {
        if (this.docEditor) {
            this.docEditor.destroyEditor()
        }
        const url = "https://example.com/url-to-example-document.docxf";
        const key = filename + ".docxf";
        this.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "docxf",
                "key": key,
                "title": "Form Template",
                "url": url
            },
            "documentType": "word"
        });
    }
</script>

完成后，可以打开表单模板进行编辑。编辑此文件后，请单击另存为 pdf 按钮，您可以得到表单文件。

如何从网站打开PDF进行填写

要制作可供填写的 PDF 格式的在线表格，请按照以下步骤操作：

查找并打开ONLYOFFICE文档的 index.html 文件。

通过指定API JavaScript文件的路径将其连接到Document Server API：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

添加 button 元素以打开表单：

<button onclick="open_form()">打开表单</button>

在将打开编辑器的位置添加 div 元素：
```
<div id="placeholder"></div>
```
如果编辑器是打开的，添加脚本以关闭编辑器：
```
if (this.docEditor) {
    this.docEditor.destroyEditor()
}
```

创建需要打开的表单模板的完整URL地址：

const url = "https://example.com/url-to-example-document.pdf";

创建用于标识文件的key
```
const key = filename + ".pdf";
```
请注意， key 字段不会传递给编辑器的配置。该字段将自动生成为一个随机数。这使得打开表单的所有会话都是独立的。因此，PDF文件上的协作被禁用。这就是为什么任何人都可以在不打扰他人的情况下打开表单并填写。

使用要打开的文档的配置，添加初始化文档编辑器的脚本，并在placeholder元素中打开编辑器：

this.docEditor = new DocsAPI.DocEditor("placeholder",
{
    "document": {
        "fileType": "pdf",
        "title": "Form",
        "url": url
    },
    "documentType": "pdf"
});

完整的代码片段如下所示：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_form()">Open Form</button>
<div id="placeholder"></div>
<script>
    function open_form() {
        if (this.docEditor) {
            this.docEditor.destroyEditor()
        }
        const url = "https://example.com/url-to-example-document.pdf";
        const key = filename + ".pdf";
        this.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "pdf",
                "title": "Form",
                "url": url
            },
            "documentType": "pdf"
        });
    }
</script>

完成后，可以打开表格进行填写。填写字段后（必填字段以红色边框突出显示），单击提交按钮,您就可以提交数据。