如何将ONLYOFFICE表单嵌入到网页中
2022年03月14日作者: Alina
您可以把在线表单易于添加到网站上,让别人填写它并下载为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 表单。