如何将ONLYOFFICE表单嵌入到网页中

您可以把在线表单易于添加到网站上，让别人填写它并下载为PDF格式。阅读这篇文章，了解如何将ONLYOFFICE可填写的表单嵌入到网页中。

简单介绍

您应该对我们表单工具已经比较了解。 不了解的话，我们来提醒一下。从7.0版的 ONLYOFFICE 文档开始，您可以创建并协作编辑在线表单，也可以让其他用户填写。

从 8.0 版本开始，我们将改用行业标准的 PDF 格式，并充分利用发挥其优势。这样，在 ONLYOFFICE 表单编辑器中，您主要使用两种格式。使用 DOCXF 模板，从头开始或者使用文档模板创建可填写的表单。已准备完毕的表单可以另存为 PDF 格式并与其他人分享。

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

请打开您的 ONLYOFFICE 文档服务器的 index.html 文件。然后，将其连接到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>

完成之后，就可以打开表单模板进行编辑。这个文件编辑完成后，您可以得到独立的表单。要做到这一点，请点击 “另存为 PDF”。

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

您需要添加打开表单进行填写的按钮。然后，添加 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 + ”.pdf”;
    const key = filename + ”.pdf”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “pdf”,
            “title”: “Form”,
            “url”: url
        },
        “documentType”: “pdf”
    });
}
</script>

请注意， key 字段不会被传递到编辑器的配置中。该字段将自动生成为随机数，这允许使打开表单的过程变成完全独立的。因此，禁止进行 PDF 文件的协作编辑。这意味着任何人都可以不干扰他人打开并填写表单。

完成之后，就可以打开表单进行填写。填写字段完成以后（必填的字段用红色突出显示的），您可以打印或者下载 PDF 表单。