如何在网站嵌入可填写的PDF表单：2024巴黎奥运会赛程_业界新闻

发布时间:2024-07-28 23:24

阅读量:0

如何将可填写的 PDF 表单嵌入您的网页？访问者无需下载或注册即可查看并填写。

简单！本文以2024巴黎奥运会赛程表单为例，演示如何将其嵌入网页中。您可以在 ONLYOFFICE 表单库免费获取该模板，有白色和紫色两种背景设计。

如何在网站嵌入可填写的PDF表单

一、在协作空间找到要嵌入的文件代码

在协作空间主屏幕上，单击姓名旁边的三个点，然后转到“设置”。
在左侧面板上，选择“开发人员工具”。点击 “JavaScript SDK”
选择嵌入模式为“可编辑”，选择要嵌入的表单文件，并获取嵌入代码。

二、嵌入至您的网站

要制作可供填写的 PDF 格式的在线表单，请按照以下步骤操作：

请注意：这些方法仅在JWT被禁用时有效。从7.2版本开始，默认情况下会启用JWT，因此需要禁用它。有关令牌的更多信息可以在此处找到。

查找并打开ONLYOFFICE文档的 index.html 文件。
通过指定API JavaScript文件的路径将其连接到Document Server API：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

添加 button 元素以打开表单：

<button onclick="open_form()">Open Form</button>

在将打开编辑器的位置添加 div 元素：

<div id="placeholder"></div>

如果编辑器是打开的，添加脚本以关闭编辑器：

if (this.docEditor) {     this.docEditor.destroyEditor() }

创建需要打开的表单模板的完整URL地址：

const url = "https://example.com/url-to-example-form.pdf";

创建用于标识文件的key

const key = filename + ".pdf";

请注意， key 字段不会传递给编辑器的配置。该字段将自动生成为一个随机数。这使得打开表单的所有会话都是独立的。因此，PDF文件上的协作被禁用。这就是为什么任何人都可以在不打扰他人的情况下打开表单并填写。

使用要打开的文档的配置，添加初始化文档编辑器的脚本，并在placeholder元素中打开编辑器：

this.docEditor = new DocsAPI.DocEditor("placeholder", {     "document": {         "fileType": "pdf",         "permissions": {             "edit": false,             "fillForms": true         },         "title": "Form",         "url": url     },     "documentType": "pdf" });

完整的代码片段如下所示：

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script> <button onclick="open_form()">Open Form</button> <div id="placeholder"></div> <script>     function open_form() {         if (this.docEditor) {             this.docEditor.destroyEditor()         }         const url = "https://example.com/url-to-example-form.pdf";         const key = filename + ".pdf";         this.docEditor = new DocsAPI.DocEditor("placeholder",         {             "document": {                 "fileType": "pdf",                 "permissions": {                     "edit": false,                     "fillForms": true                 },                 "title": "Form",                 "url": url             },             "documentType": "pdf"         });     } </script>

完成后，可以打开表单进行填写。填写字段后（必填字段以红色边框突出显示），单击提交按钮,您就可以提交数据。