跳到主要内容

将表单嵌入网页

ONLYOFFICE 文档支持 PDF 表单——带有可填写字段（如文本输入框、复选框和下拉列表）的 PDF 文件。PDF 表单有两种使用模式：

备注

PDF 表单从 7.0 版本起可用。从 8.0 版本开始，OFORM 格式已被弃用——仅使用 PDF 格式进行填写。从 8.1 版本开始，DOCXF 格式已被弃用——仅使用 PDF 格式创建和编辑表单。

警告

当您的文档服务器启用了 JWT 验证（默认配置）时，每个 config 必须使用匹配的 token 进行签名。请使用您的文档服务器的 JWT 密钥进行签名。有关设置说明和代码示例，请参阅签名部分。

在以下 HTML 示例中，请将 documentserver 替换为安装 ONLYOFFICE 文档的服务器地址。

编辑表单​

若要打开 PDF 表单进行编辑，请将 documentType 设置为 "pdf"，并将 permissions.edit 设置为 true。提供 key 以便多个用户可以同时协同编辑表单模板：

const config = {
  document: {
    fileType: "pdf",
    key: "form-template-key",
    permissions: {
      edit: true,
    },
    title: "Form Template.pdf",
    url: "https://example.com/url-to-example-form.pdf",
  },
  documentType: "pdf",
};

const docEditor = new DocsAPI.DocEditor("placeholder", config);

完整的 HTML 页面：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<button onclick="openFormTemplate()">Open Form Template</button>
<div id="placeholder"></div>
<script>
    let docEditor;

    function openFormTemplate() {
        if (docEditor) {
            docEditor.destroyEditor();
        }

        const config = {
            "document": {
                "fileType": "pdf",
                "key": "form-template-key",
                "permissions": {
                    "edit": true
                },
                "title": "Form Template.pdf",
                "url": "https://example.com/url-to-example-form.pdf"
            },
            "documentType": "pdf",
            "events": {
                "onRequestStartFilling": function () {
                    docEditor.startFilling();
                },
                "onStartFilling": function () {
                    console.log("The form is ready for filling");
                }
            }
        };

        docEditor = new DocsAPI.DocEditor("placeholder", config);
    }
</script>

只有声明了 onStartFilling 或 onRequestStartFilling 事件，才会显示分享&收集按钮。如果仅声明 onStartFilling，点击该按钮会打开内置的发送以供签署面板，该面板通过 onRequestUsers 事件获取用户列表。如果要改用自己的代码处理点击，请声明 onRequestStartFilling，并在其处理程序中调用 startFilling 方法。只有同时声明了 onStartFilling，该方法才会生效。

在本示例中，编辑完成后点击分享&收集。编辑器会调用页面的 onRequestStartFilling 处理程序，该处理程序调用 startFilling 方法。随后，编辑器锁定表单，禁止继续编辑，并保存表单，保存完成后调用 onStartFilling。

嵌入 PDF 表单进行编辑嵌入 PDF 表单进行编辑

填写表单​

若要打开 PDF 表单进行填写，请将 permissions.edit 设置为 false，并将 permissions.fillForms 设置为 true。省略 key 参数——编辑器将为每个会话生成一个随机密钥，因此每个用户都可以独立填写副本，互不影响：

const config = {
  document: {
    fileType: "pdf",
    permissions: {
      edit: false,
      fillForms: true,
    },
    title: "Form.pdf",
    url: "https://example.com/url-to-example-form.pdf",
  },
  documentType: "pdf",
};

const docEditor = new DocsAPI.DocEditor("placeholder", config);

完整的 HTML 页面：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<button onclick="openForm()">Open Form</button>
<div id="placeholder"></div>
<script>
    let docEditor;

    function openForm() {
        if (docEditor) {
            docEditor.destroyEditor();
        }

        const config = {
            "document": {
                "fileType": "pdf",
                "permissions": {
                    "edit": false,
                    "fillForms": true
                },
                "title": "Form.pdf",
                "url": "https://example.com/url-to-example-form.pdf"
            },
            "documentType": "pdf"
        };

        docEditor = new DocsAPI.DocEditor("placeholder", config);
    }
</script>

填写完所有必填字段后，点击完成并提交按钮提交数据。

嵌入 PDF 表单嵌入 PDF 表单