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

2022日03月14日作者: Alina 0 681

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

简单介绍

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

在ONLYOFFICE表单编辑器中，您主要使用两种格式。通过DOCXF格式可以从头开始创建表单模板，也可以用现有的DOCX文件来创建表单模板。通过OFORM格式您可以填写已准备完毕的表单。

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

请打开您的ONLYOFFICE Docs服务器的 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>

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.

// Add the element where the editor will be opened.

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”。

如何从网站上打开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>