paint-brush
如何向 JavaScript PDF 查看器添加注释、编辑和表单编辑器工具经过@mesciusinc
新歷史

如何向 JavaScript PDF 查看器添加注释、编辑和表单编辑器工具

经过 MESCIUS inc.11m2024/06/27
Read on Terminal Reader

太長; 讀書

了解如何使用 JavaScript PDF 查看器添加 PDF 注释、应用编辑和 PDF 表单编辑器工具。
featured image - 如何向 JavaScript PDF 查看器添加注释、编辑和表单编辑器工具
MESCIUS inc. HackerNoon profile picture

随着越来越多的商业应用程序进入网络环境,将文档共享和编辑等功能转移到浏览器也是合情合理的。然而,在许多情况下,用户需要做的不仅仅是查看 PDF 文档。


他们可能需要添加注释来提供更多信息、从文档中删除个人信息,甚至填写文档中的表单字段。幸运的是, Document Solutions JavaScript PDF Viewer可以轻松将此功能添加到您的JavaScript应用程序中。


在本文中,我们将介绍 Document Solutions JavaScript PDF Viewer 的以下功能:


  • JavaScript PDF 查看器的注释编辑器

  • 注释的主要功能

  • 删除 PDF 中的内容

  • JavaScript PDF 查看器的表单编辑器

  • 表单编辑器的主要功能

  • PDF 查看器的其他编辑选项


现在,让我们来看看这些功能。

JavaScript PDF 查看器的注释编辑器

Document Solutions JavaScript PDF Viewer 中的注释工具将帮助用户查看和标记 PDF 文档中的重要信息。他们还可以在保留原始内容的同时,添加、修改和删除现有 PDF 文档中的注释。


用户可以在 PDF 上绘制注释,并评论和回复彼此的评论。通过隐藏注释的功能,用户可以轻松查看和打印原始文档,如果需要,他们还可以打印包含注释的副本。注释编辑器列出了文档中的所有注释,使您可以访问和修改现有注释:


注释编辑器

用例和优势

通常,用户依靠Adobe Acrobat来注释 PDF。使用包含编辑功能的查看器,您的用户可以直接在应用程序中注释他们的文档,而无需在应用程序之间来回移动。如您所见,包含编辑功能的查看器可以显著简化企业的工作流程。


以下仅列举几个该功能有益的例子:


  • 一名公司员工想要将财务报告发送给管理层进行审核。管理层可以在 PDF 查看器中在线打开报告,使用注释建议更改,并让员工知道已做出评论。然后,员工可以在在线编辑器中打开文档,并使用所做的注释在查看器中更新它。


  • 员工对公司的薪酬结构存有疑虑。他们可以通过 PDF 查看器阅读文档,删除机密信息,并通过注释工具标记需要澄清的区域。


  • 网站设计师为网站准备屏幕截图,并将其合并为 PDF 以供审阅。审阅者使用注释工具标记需要更改的区域。


Document Solutions JavaScript PDF Viewer 中的注释工具使所有这些场景成为可能。让我们来看看 Annotations 中包含的功能。

注释的主要功能

注释具有以下主要功能:


  • 使用一系列注释编辑 PDF
  • 通过用户友好的用户界面标记重要信息
  • 在新的和现有的 PDF 中添加、修改和删除注释
  • 增强 PDF 内容并应用注释特定属性
  • 打印原始 PDF 而不做任何修改
  • 在客户端上保存修改后的带注释的 PDF

使用一系列注释编辑 PDF

Document Solutions PDF Viewer 支持您查看 PDF 文档所需的所有注释。您可以添加以下内容:


  • 文本注释(便签)- 在 PDF 上添加文本或便签
  • 自由文本注释 - 添加在 PDF 上始终可见的注释
  • 墨迹注释 - 在 PDF 上自由绘制涂鸦
  • 方形注释-在 PDF 上添加矩形/方形
  • 圆形注释- 在 PDF 上添加圆形
  • 线注释-在 PDF 上添加直线
  • 折线注释 - 在 PDF 上添加具有多个边的封闭或开放形状
  • 多边形注释-在 PDF 上添加多边形
  • 文件附件注释-将文件附加到文档,该文件将嵌入到 PDF 中
  • 声音注释 - 添加从文件导入或从计算机麦克风录制的声音(.au、.aiff 或 .wav 格式)
  • 链接注释 - 添加可以链接到不同网页、调用搜索引擎和执行 JavaScript 的链接
  • 图章注释 - 使用本地或服务器中的图像作为 PDF 上的注释

通过用户友好的用户界面标记重要信息

Document Solutions PDF Viewer 注释工具具有直观的用户界面,允许用户在 PDF 上绘制注释。PDF Viewer 包含一个单独的注释工具栏和编辑器,用于添加注释、修改其属性或从现有 PDF 中删除注释。


属性面板显示文档中的注释列表。您可以选择 PDF 上的任何注释,从左侧面板应用注释特定的属性,或删除注释。


在面板中的“页面”选项卡上,您可以查看页面上有多少注释。当您发送文档以供审阅时,您可以确定所做的编辑次数。


属性面板

在新的和现有的 PDF 中添加、修改和删除注释

您可以在 JavaScript PDF Viewer 中查看 PDF 时随时编辑现有注释或删除它们。要添加注释,只需单击左侧面板上的注释编辑器按钮,您将看到注释工具栏。单击任何注释,然后直接在 PDF 上绘图。选择注释,您将看到注释属性显示在左侧面板中。您还可以加载带有现有注释的 PDF,选择注释,修改属性,或从属性面板中删除注释。


添加、修改和删除注释

增强 PDF 内容并应用注释特定属性

用户将发现查看器中广泛支持设置注释特定属性。您可以从属性面板添加富文本、设置文本颜色、添加边框、设置作者和主题、添加回复、设置注释的边界/X/Y 位置等。


应用注释特定的属性

打印 PDF 而不进行修改

如果您想查看原始 PDF,您可以使用隐藏按钮隐藏注释,并打印不带注释的 PDF。


在 JavaScript PDF 查看器中隐藏注释

在客户端保存修改后的带注释的 PDF

单击“保存”按钮将更改应用于您的 PDF 并保存注释。查看器需要连接到运行DsPdf的服务器才能保存更改。更改列表和原始 PDF 被发送到服务器,DsPdf 在该服务器应用更改。然后,它将修改后的 PDF 发送回客户端,用户可以在那里保存它。


保存修改后的 PDF 并附加注释

删除 PDF 中的内容

工具栏中的“标记注释”“标记区域”选项可帮助您标记要删除的机密部分。您可以设置“标记边框颜色”和“标记填充颜色”,让用户标记要删除的区域。用户可以设置这些属性,以便在将鼠标悬停在已删除的内容上时应用,即“覆盖填充颜色”“覆盖文本”“覆盖文本对齐”“重复文本”属性。当从文档中删除内容时,所有这些选项都会出现在您的 PDF 中。


您还可以通过“属性”面板中的“应用密文”按钮对特定内容进行密文处理。应用密文后,您可以使用工具栏中的“重置密文”按钮将其重置。但是,保存 PDF 时,已密文的信息将无法再访问,并且已应用的密文无法重置。


您可以应用单个密文注释,也可以单击“应用所有密文”按钮将密文应用于整个文档。当您保存应用了密文的 PDF 时,密文内容将从 PDF 中完全删除。用户无法选择或复制已删除的内容到另一个文档,也无法使用其他 PDF 工具阅读密文内容。


编辑 PDF 内容

JavaScript PDF 查看器的表单编辑器

使用表单编辑器,您现在可以在线设计交互式 PDF 表单。编辑器将帮助您在创建表单时使用各种表单字段和高级属性。您还可以在线填写和提交表单


表单编辑器的功能包括:


  • 从头开始创建新的 PDF 表单
  • 设计、填写、提交和重置 PDF 表单
  • 直接从用户处收集数据并填充 PDF 表单
  • 从外部来源(数据库、 JSON等)将数据填充到表单字段中
  • 将表单域添加到现有 PDF 文档
  • 编辑现有 PDF 文档中的表单域
  • 向 PDF 表单添加 JavaScript 功能
  • 将多种属性应用于表单字段
  • 快速、直观的 UI 工具栏和属性面板用于设计 PDF 表单
  • 构建自定义 UI - 省略工具栏中不必要的字段

基于 Web 的 PDF 表单设计器的需求

  • PDF 格式是布局和外观最受欢迎的格式。因此,尽管HTML 表单很流行,但 PDF 表单的外观始终与您设计时的外观一致。


  • 大多数应用程序都是基于网络的,而 Document Solutions PDF Viewer 是一款一站式在线工具,可用于创建 PDF 表单、编辑 PDF、添加注释以及在客户端保存修改后的 PDF。这是一种在单个应用程序中生成和保存 PDF 的更快捷方式。


  • 开发人员可以在 Acrobat 中创建 PDF 表单并在线共享。但是,在浏览器的默认查看器中打开的 PDF 无法自定义,开发人员也无法在表单上使用其他 JavaScript 操作,例如提交内容或使用表单数据填充内容。Document Solutions PDF Viewer 支持更多 JavaScript 操作,您可以使用提交和重置操作在表单上设置这些操作。


  • 您可以使用Microsoft Word创建表单,也可以使用 PDF 编辑器。在 Word 中创建 PDF 表单可能具有挑战性,因为它需要复杂的编辑工具。Document Solutions PDF Viewer 表单设计器直观易用,包含用户友好的用户界面和属性面板,可在表单字段上设置所需的属性。


  • 您可以设计 PDF 表单,以便在任何浏览器上查看和填充。您也不必担心其外观或最终用户是否拥有 Adobe Acrobat。

您可以创建的不同类型的 PDF 表单

您可以使用表单设计器创建以下 PDF 表单:


  • 注册表(例如:活动、大学课程、会员资格、病史、竞赛等)

  • 申请表(例如:工作申请表、贷款申请表等)

  • 反馈表(例如:活动、网站、电子商务等)

  • 申请表(例如:租赁、信息、付款表格等)


JavaScript PDF 表单编辑器

PDF 表单设计器的主要功能

Document Solutions JavaScript PDF Viewer 支持多种类型的表单字段,可帮助您使 PDF 具有交互性和完整性:


  • 文本字段- 允许用户输入文本,例如姓名、电话号码等。
  • 密码字段 - 让用户输入文档的密码
  • 文本区域字段- 允许您添加长格式文本,例如工作经验、地址等。
  • 复选框字段 - 让您的用户选择多个选项
  • 组合文本字段 - 允许您在等距位置添加文本(例如,在注册表上输入日期、电子邮件等)
  • 组合框字段 - 可让您从弹出菜单中选择一个项目或输入一个值
  • ListBox 字段 - 显示可供选择的选项列表
  • 按钮字段——触发特定操作的交互式按钮,例如打开单个文件、显示弹出消息等。
  • 单选按钮字段 - 显示一组选项,用户只能从中选择一个
  • 提交按钮字段 - 让您提交已填写的表格
  • 重置按钮字段-允许您重置表单

用于设计 PDF 表单的用户友好型 UI

文档解决方案表单编辑器工具具有用户友好的用户界面,可用于将表单字段添加到 PDF。PDF 查看器包含单独的表单字段工具栏和编辑器,可用于添加表单字段、修改属性或从现有 PDF 中删除它们。属性面板显示文档中的表单字段列表。您可以选择 PDF 上的任何表单字段,从左侧面板应用表单字段特定的属性,然后删除表单字段。在面板中的页面选项卡上,您还可以查看页面上有多少个表单字段。


表单字段工具栏和编辑器

在新的或现有的 PDF 表单中添加、修改和删除表单字段

在在线查看器中设计 PDF 表单时,您可以随时更改现有表单字段,也可以将其删除。要添加表单字段,只需单击左侧面板上的“表单编辑器”按钮,您将看到“表单编辑器”工具栏。单击任何表单字段,然后直接在 PDF 页面上绘制。选择表单字段,您将看到左侧面板中显示的表单字段属性。您还可以加载具有现有表单字段的 PDF 表单,选择表单字段,应用属性,或从属性面板中选择“删除”选项以删除表单字段。

添加、修改和删除表单字段

使用表单字段特定属性增强 PDF 表单

对于设置查看器支持的每个表单字段的表单字段特定属性,提供了广泛的支持。除了一些常规功能外,您还可以设置名称、只读、值、对齐、背景色、最大长度、边框属性、字体大小,以及设置表单字段的边界/X/Y 位置。


此外,您还可以在文本字段(例如 TextField、PasswordField、TextArea 和 ComboText Field)上设置Required 属性。


使用表单字段特定属性增强 PDF 表单

打印原始 PDF 表单

如果您想查看原始 PDF 文件,您可以使用主工具栏上的隐藏按钮隐藏表单字段,并查看或打印不包含表单字段的 PDF 文件。


隐藏表单字段

在客户端上保存新设计的包含表单字段的 PDF

将更改应用于您的 PDF 文档,并保存表单字段。此操作需要服务器上的DsPdf产品来获取原始 PDF 和更改列表,应用更改,并将修改后的 PDF 发送回客户端。

填写并提交 PDF 表单

设计 PDF 表单后,您可以让用户填写并提交 PDF 表单到查看器。表单数据可以提交到数据库,也可以从填充的值生成 PDF。您还可以将表单数据从数据库导入到查看器的 PDF 表单中。


填写并提交 PDF 表单

PDF 查看器的其他编辑选项

除了注释、修订和表单字段之外,您还可以使用以下功能来处理和编辑 PDF 文档。

创建空白 PDF 文档

可以使用 PDF 查看器通过新建文档按钮创建 PDF 文档。您可以通过注释表单编辑器工具设计 PDF 或 PDF 表单。


使用 JavaScript PDF Viewer 创建空白 PDF 文档

在 PDF 文档中添加新页面和删除页面

您可以使用新建页面按钮向现有 PDF 文档或原始 PDF 文档添加页面,并使用删除按钮删除页面。


在 PDF 文档中添加新页面和删除页面

从 PDF 文档中选择并删除注释/表单字段

您可以随时在注释编辑器和表单编辑器视图中选择添加到 PDF 文档的注释/表单字段。使用删除按钮可从新的或现有的 PDF 文档中删除注释或表单字段。


从 PDF 文档中删除注释/表单字段

撤消和重做更改

如果您想撤消或重做对注释或表单字段的更改,可以使用注释和表单编辑器中的撤消/重做按钮。这些按钮会逐步记录您的更改,您可以不断撤消或重做操作,直到对结果满意为止。


撤消和重做 PDF 更改

结论

至此,我们了解了 Document Solutions JavaScript PDF Viewer 的注释、编辑和表单字段功能。如您所见,添加自己的注释、编辑不应显示的信息以及添加/编辑表单字段以创建交互式 PDF 表单再简单不过了。