构建具有交互式 PDF 表单的 JavaScript 应用
0/5 (0投票)
本文将帮助您设计一个应用程序，该应用程序允许您将交互式 PDF 表单加载到查看器中。
在什么情况下，您需要创建带有交互式表单字段的 JavaScript 应用程序？考虑以下场景：您参加一个有多场会议和不同演讲者的会议。在每场会议结束时，您会收到一份反馈表，需要填写并交给活动人员。
有多少人会愿意提交反馈？如果通过在线链接共享同一份表单，提交反馈会更方便。该表单可以很简单，只需在您的移动设备上单击一个按钮即可。设计这样的平台是一个常见场景；我们现在使用这些表单以预定义格式在线收集信息。
本文将帮助您构建一个基于 JavaScript 的 PDF 应用程序，该应用程序允许您将交互式表单加载到查看器中。此查看器支持填写表单。表单填写完成后，用户可以单击提交按钮，并将填好的表单以 PDF 格式保存在服务器上。
我们正在使用 Grapecity Documents for PDF 和 Documents PDF Viewer 来查看/填写交互式 PDF 表单，并使用 **Grapecity Documents for Pdf API** 来收集表单数据并将其作为 PDF 文件保存在服务器上。
我们将使用一个活动反馈表来收集会议观众的反馈。该表单包含一个由多项选择题形式组成的反馈问卷。多项选择是通过使用 RadioButton 表单字段提供的。您可以尝试使用使用其他类型的表单字段创建的不同表单。
步骤 1：在 GcDocs PDF 查看器中加载空白 PDF 表单
GcDocs PDF Viewer 是一个基于客户端 JavaScript 的控件，它允许您在浏览器中加载、查看、编辑和保存 PDF 文件。该控件丰富的客户端 API 提供了执行这些功能的方法和属性。
GcDocs PDF Viewer 的 open 方法用于将 PDF 文档加载到查看器中，从而使用户能够查看和处理 PDF 文档。查看器在加载 PDF 文件时支持许多标准的 PDF 功能，如此处所示。
下面的代码使用 open 方法在 **GcDocs PDF Viewer** 中加载交互式 PDF 表单。
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });
viewer.addDefaultPanels();
viewer.open("StaticFiles/FormSubmit.pdf");
}
</script>
空白表单在查看器中加载后的效果如下
步骤 2：填写并提交表单
在 **GcDocs PDF Viewer** 中加载的交互式 PDF 表单是完全可编辑的，用户可以填写。执行所需操作，例如单击文本字段、单选按钮、复选框或打开组合框的下拉列表等。可以使用此处列出的查看器功能以更多方式处理文档。
在查看器中加载的活动反馈表包含文本字段和单选按钮。在此，您输入或选择表单中的相应值，然后单击提交按钮将填好的表单保存在服务器上。
在浏览器中填好的表单看起来像这样
步骤 3：将填好的 PDF 表单保存在服务器上
表单填写完成后，用户单击提交按钮后，表单中输入的数据将被发送到服务器端。PDF 表单的副本将被保存在服务器上。
这时 **GcPdf** **API** 就派上用场了。此 API 允许您通过提供丰富的 API 成员集合以多种方式处理 PDF 文档，详细信息请参见此处。
使用此 GcPdf API，在服务器端定义了一个处理程序方法，该方法解析客户端响应，并通过填充提交的字段值来构建“values”集合。当用户单击提交按钮时，将调用此方法。
以下是处理程序方法的示例代码片段
public IActionResult Index(IFormCollection fields)
{
//Parses the client response and builds the 'values' collection
//filling it with the submitted field values.
var fieldsTree = new List<FieldExportEntry>();
foreach (var key in fields.Keys)
{
if (fields.TryGetValue(key, out StringValues value))
{
var node = new FieldExportEntry() { Name = key };
if (TryParseRadioButtonsSet(value, out int selectedIndex))
{
node.Values = new List<string>() { selectedIndex.ToString(System.Globalization.CultureInfo.InvariantCulture) };
}
else
{
foreach (var v in value)
{
if (node.Values == null) node.Values = new List<string>(); node.Values.Add(v);
}
}
fieldsTree.Add(node);
}
}
ImportFormData(fieldsTree);
return View();
}
上面定义的处理程序方法在 Handler 方法中创建的“values”集合上执行以下操作，以将 PDF 文件保存在服务器上
- 调用一个方法，使用上一步中创建的 values 集合准备 XML。
public static void SaveFieldsToXML(List<FieldExportEntry> values, Stream stream)
{
XmlWriterSettings xws = new XmlWriterSettings()
{
Indent = true,
CloseOutput = false,
Encoding = Encoding.UTF8
};
using (XmlWriter xw = XmlWriter.Create(stream, xws))
{
xw.WriteStartElement("fields");
xw.WriteAttributeString("xmlns", "xfdf", null, "[http://ns.adobe.com/xfdf-transition/](http://ns.adobe.com/xfdf-transition/)");
foreach (var ftn in values)
{
xw.WriteStartElement(ftn.Name);
foreach (var v in ftn.Values)
{
xw.WriteStartElement("value");
xw.WriteString(v == "true" ? "Yes" : v);
xw.WriteEndElement();
}
xw.WriteEndElement();
}
xw.WriteEndElement();
}
}
-
将 XML 数据导入新创建的 PDF 文档中，并将生成的 PDF 保存在服务器端。
GcPdf API 中的
ImportFormDataFromXML用于导入 xml 数据，GcPdfAPI 中的Save方法用于将 PDF 文件保存在服务器上。
public static void ImportFormData(List<FieldExportEntry> values)
{
GcPdfDocument pdf = new GcPdfDocument();
using (var fs = new FileStream(Path.Combine("MyNewStaticFiles", "EventFeedbackForm_Filled.pdf"), FileMode.Open, FileAccess.Read))
{
pdf.Load(fs);
using (var ms = new FileStream("FormFields_Filled.xml", FileMode.Create))
{
SaveFieldsToXML(values, ms);
ms.Seek(0, SeekOrigin.Begin);
pdf.ImportFormDataFromXML(ms);
}
//Save the filled-in form on the server
pdf.Save("filledForm.pdf");
}
}
以下是保存在服务器上的填好的表单的快速预览
现在您有了交互式 PDF 表单，可以轻松地将其添加到您的下一个应用程序中。借助强大的文档 API，您可以收集表单数据并将其作为 PDF 文件保存在服务器上。查看器允许您可视化和处理 PDF 文档。一旦您掌握了使用这些快速高效的工具进行处理的过程，最终用户提供您所需信息的难度就会降低。如果您需要创建包含一个或多个交互式表单的应用程序，您就知道了如何使提交过程尽可能顺畅。
尝试使用 **GcDocs PDF Viewer** 加载 PDF 文件，并探索查看器支持的各种 PDF 功能，包括表单、注释、JavaScript 操作、密码保护文档等。