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

<p>您可以把在线表单易于添加到网站上，让别人填写它并下载为PDF格式。阅读这篇文章，了解如何将ONLYOFFICE可填写的表单嵌入到网页中。</p>
<p><img decoding="async" loading="lazy" class="wp-image-27552 size-full aligncenter" src="https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/onlyoffice-form-integration.png" alt="How to embed fillable ONLYOFFICE forms into a web page" width="736" height="371" srcset="https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/onlyoffice-form-integration.png 736w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/onlyoffice-form-integration-300x151.png 300w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/onlyoffice-form-integration-634x320.png 634w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/onlyoffice-form-integration-353x178.png 353w" sizes="(max-width: 736px) 100vw, 736px" /></p>
<p></p>
<h2>简单介绍</h2>
<p>您应该对我们<a href="https://www.onlyoffice.com/zh/form-creator.aspx?utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>全新的表单工具</u></a>已经比较了解。 不了解的话，我们来提醒一下。从7.0版的ONLYOFFICE Docs开始，您可以创建并协作编辑在线表单，也可以让其他用户填写，并将表单另存为PDF格式。</p>
<p>在ONLYOFFICE表单编辑器中，您主要使用<a href="/blog/?p=27407&#038;utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>两种格式</u></a>。通过DOCXF格式可以从头开始创建表单模板，也可以用现有的DOCX文件来创建表单模板。通过OFORM格式您可以填写已准备完毕的表单。</p>
<p style="text-align: center;"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/SKGz4pmnpgY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></p>
<h2>如何从网站上打开DOCXF进行编辑</h2>
<p>请打开您的ONLYOFFICE Docs服务器的 <code>index.html</code> 文件。然后，将其连接到API文档服务器。您需要指定配置参数以打开表单模板。</p>
<pre class="theme:github font:monospace lang:js decode:true ">&lt;script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"&gt;&lt;/script&gt; 
   // Specify the path to the API JavaScript file.
&lt;button onclick="open_form_template()"&gt;Open Form Template&lt;/button&gt; 
   // Add a button to open the form.
&lt;div id="placeholder"&gt;&lt;/div&gt; 
   // Add the element where the editor will be opened.
&lt;script&gt;
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”
    });
}
&lt;/script&gt;</pre>
<p>完成之后，就可以打开表单模板进行编辑。这个文件编辑完成后，您可以得到独立的表单。要做到这一点，请点击 &#8220;另存为OFORM&#8221;。</p>
<h2>如何从网站上打开OFORM进行填写</h2>
<p>您需要添加打开表单进行填写的按钮。然后，添加 <code>open_form_template()</code> 函数。</p>
<pre class="theme:github font:monospace lang:js decode:true ">&lt;script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"&gt;&lt;/script&gt; 
   // Specify the path to the API JavaScript file.
&lt;button onclick="open_form()"&gt;Open Form&lt;/button&gt; 
   // Add a button to open the form.
&lt;div id="placeholder"&gt;&lt;/div&gt; 
   // Add the element where the editor will be opened.
&lt;script&gt;
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”
    });
}
&lt;/script&gt;</pre>
<p>请注意， <code>key</code> 字段不会被传递到编辑器的配置中。该字段将自动生成为随机数，这允许使打开表单的过程变成完全独立的。因此，禁止进行OFORM文件的协作编辑。这意味着任何人都可以不干扰他人打开并填写表单。</p>
<p>完成之后，就可以打开表单进行填写。填写字段完成以后（必填的字段用红色突出显示的），您可以将结果下载为PDF文件。要做到这一点，点击 &#8220;另存为PDF&#8221;。</p>
<p><img decoding="async" loading="lazy" class="img-popup aligncenter wp-image-27586" src="https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding.png" alt="如何将ONLYOFFICE表单嵌入到网页中" width="736" height="370" srcset="https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding.png 1920w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-300x151.png 300w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-1024x515.png 1024w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-768x386.png 768w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-1536x773.png 1536w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-634x320.png 634w, https://static-blog.onlyoffice.com/wp-content/uploads/2022/03/forms-embedding-353x178.png 353w" sizes="(max-width: 736px) 100vw, 736px" /></p>
<div class="useful-links">
<h3>有用链接</h3>
<p><a href="https://api.onlyoffice.com/?utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>API资料</u></a></p>
<p><a href="/blog/?p=26435&#038;utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>如何创建可填写的表单</u></a></p>
<p><a href="/blog/?p=27407&#038;utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>OFORM和DOCXF格式简介</u></a></p>
<p><a href="https://oforms.onlyoffice.com/zh/?utm_source=blog&amp;utm_medium=article&amp;utm_campaign=emdeb_forms" target="_blank" rel="noopener"><u>免费表单模板库</u></a></p>
<p><a href="/blog/?p=26353&#038;utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>关于ONLYOFFICE表单的7个有趣事实</u></a></p>
<p><a href="https://www.onlyoffice.com/zh/developer-edition.aspx?utm_source=blog&amp;utm_medium=article&amp;utm_campaign=embed_forms" target="_blank" rel="noopener"><u>ONLYOFFICE开发者版本</u></a></p>
</div>

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

最新博文

如何使用ONLYOFFICE宏分析电子表格数据

2023一起重返校园：ONLYOFFICE 教育优惠

ONLYOFFICE 2023 年夏季活动总结