Skip to content

示例工程简介

UIExtension

功能完整的 webViewer

这是一个即用型应用程序,集成了 SDK 提供的所有功能,您可以直接运行或集成到您的项目中。此应用程序使用功能齐全的 UIExtension.full.js 库进行 PDF 视图和文档解析。

源码文件路径: /examples/UIExtension/complete_webViewer

集成示例

该示例引导您如何将 SDK 作为 es-moduleamd 或者 commonJS 模块来进行集成。有关全局变量集成示例,请参阅 /examples/UIExtension/complete_webViewer/index.html 文件中的代码。

源码文件路径: /examples/UIExtension/integrate-as-module

自定义全局注释属性

该示例用来说明如何使用构造函数选项或者函数设置默认注释属性。

源码文件路径: /examples/UIExtension/default_annot_config

自定义工具提示示例

该示例用来说明如何在侧边栏和工具栏上自定义工具提示。

源码文件路径: /examples/UIExtension/tooltip

异步/同步注释加载

该示例用来说明如何通过使用 <commentlist-sidebar-panel> 标签中的 lazy 属性 (true 或者false),以异步或同步的方式来加载 PDF 中的注释。

源码文件路径: /examples/UIExtension/commentlist-loadmode

自定义文本选择

该示例用来说明如何为文本选择创建自定义控件。

源码文件路径: /examples/UIExtension/custom-text-selection-tool

自定义注释弹出窗口

双击 webViewer 中的注释的默认行为是触发注释面板。该示例通过添加弹出式图层和重写 onDoubleTap 事件来说明如何修改默认事件。

源码文件路径: /examples/UIExtension/custom_annotations_popup

自定义UI

该示例用来说明如何自定义 UI 。其中一个是用于 PC 浏览器的非自适应示例,另外一个介绍了如何为跨浏览器设置自适应。WebViewer 在初始化时会检测浏览器的 navigator.userAgent,并相应地确定 UI – PC 或者移动设备。

源码文件路径: /examples/UIExtension/custom_appearance

通过模板自定义布局

该示例用来介绍 UIExtension 中的内置模板以及参考方法。此示例适用于需要对模板进行微调的用户。

源码文件路径: /examples/UIExtension/layout_templates

通过 Fragments 自定义组件

该示例用来介绍如何通过 fragments 来修改组件以及设置组件配置。

源码文件路径: /examples/UIExtension/fragment_usage

注释数据迁移示例

该示例用来介绍如何将注释 JSON 数据从 v6 迁移到 v7,以避免数据丢失。

源码文件路径: /examples/UIExtension/migrateAnnotData

PWA示例

该示例用来介绍如何实现渐进式 web 应用。

源码文件路径: /examples/UIExtension/pwa

UI Widgets 示例

该示例是 UIExtension.components.widget 在API手册中引用的示例。每个示例都展示了一个组件的用法 ( 包括如何传递参数,事件绑定等)。

源码文件路径: /examples/UIExtension/tutorials/widgets

Addon 使用示例

该示例用来说明如何在您的代码中合并 addon 以及引用 merged-add.js

源码文件路径: /examples/UIExtension/use-merged-addon

自定义 Annotation Tooltip 示例

Annotation Tooltip 是指当用户将鼠标悬停在 Annotation 上时出现的浮动框。该示例展示了如何通过 AnnotTooltip 参数自定义 Annotation Tooltip,包括如何展示内容、指定浮动框的位置以及显示和隐藏。

源码文件路径: /examples/UIExtension/custom_annotations_tooltip/index.html

设置数字图章的身份信息

该示例展示了如何使用 DigitalStampUIXAddonsetIdentityInfo 接口设置身份信息。

源码文件路径: /examples/UIExtension/custom-digital-identity

预设自定义字体

该示例展示了如何配置和加载自定义字体,并最终在打开的文档中体现。

源码文件路径: /examples/UIExtension/custom-font/index.html

自定义面积测量工具

该示例展示了如何自定义一个可以创建测量矩形面积工具的 StateHandler

源码文件路径: /examples/UIExtension/custom-measurement/index.js

自定义进度条

该示例展示了如何自定义一个进度条,用于在打开文档之前或关闭文档之后更新进度信息。

源码文件路径: /examples/UIExtension/custom-percentage-process/index.html

自定义创建 Redact 工具

该示例展示了如何自定义一个 StateHandler,用于选择页面上的文本,并根据选中的文本矩形框创建 Redact

源码文件路径: /examples/UIExtension/custom-redaction/index.js

签名流程

该示例展示了签名的完整流程,包括预设图片的加载、绘制签名图片、签名、校验等流程。

源码文件路径/examples/UIExtension/custom-signature-flow/index.js

PDFViewCtrl

基础 webViewer

这是一个基础的 webViewer,演示了如何调用 SDK API 加载 PDF 文档,以及放大/缩小文档。该示例使用 lib 文件夹下的 PDFViewCtrl.full.js 库。

源码文件路径: /examples/PDFViewCtrl/basic_webViewer

重写 PDFPageRendering 类示例

该示例在渲染页面时,可以通过重写 PDFPageRendering 类在每个 PDF 页面的节点上加入自定义的 UI,比如加入一个加载动图或者类似进度条的 UI。

源码文件路径: /examples/PDFViewCtrl/override-rendering

预加载 Worker 示例

该示例介绍了如何提前加载 jr 引擎的worker脚本,从而获得减少初始化时间的性能优势。

源码文件路径: /examples/PDFViewCtrl/preload-worker

异步加载示例

该示例介绍如何从 URL 异步打开文件。

源码文件路径: /examples/PDFViewCtrl/url

离线示例

该示例阐述了如何注册 examples/PDFViewCtrl/service-worker 文件夹下的 service-worker.js,以便在 service worker 支持的浏览器中更好的缓存核心依赖文件 gsdk.js 和字体文件,以加快文件二次打开的速度以及用于离线模式。

源码文件路径: /examples/PDFViewCtrl/service-worker

内嵌 DIV 示例

该示例将 SDK 的简单 UI 渲染到指定大小的 div 容器内。

源码文件路径: /examples/PDFViewCtrl/div

FileOpen 插件示例

该示例介绍了如何打开一个受 fileOpen 保护的文档。

源码文件路径: /examples/PDFViewCtrl/fileopen

页面布局重写示例

该示例阐述如何创建一个单视图页面布局以及如何在没有滚动功能的情况下通过向上和向下箭头键导航页面。通过此示例,您将学习如何注册和继承 IViewMode 来实现自己的布局以及自定义导航页面状态。

源码文件路径: /examples/PDFViewCtrl/view-mode

文档密码重新加密示例

该示例介绍如何打开一个密码重新加密的文档。密码重新加密 node.js 示例在 ... \server\encrypt-password 目录下。

源码文件路径: /examples/PDFViewCtrl/encrypt-password

页面操作示例

该示例介绍如何对页面进行操作。

源码文件路径: /examples/PDFViewCtrl/ppo

Form Wedigets 添加示例

该示例介绍如何创建支持的 form widgets

源码文件路径: /examples/PDFViewCtrl/add-form-fields

注释创建示例

该示例介绍如何继承 linkscreen、和 textMarkup 注释的 StateHandler 类来实现注释创建类。

源码文件路径: /examples/PDFViewCtrl/create-annot

License 验证工具

该示例提供了对 license 进行验证的工具。

源码文件路径: /examples/PDFViewCtrl/check-license

屏幕阅读器示例

该示例提供了允许屏幕阅读器朗读 PDF 文本内容的代码示例。

源码文件路径: /examples/PDFViewCtrl/accessibility/read-content/index.html

自定义 PageCustomRender 示例

该示例展示了通过自定义 PageCustomRender 控制页面是否被渲染、以及向待渲染的 PDF 页面 DOM 节点中插入自定义内容。

源码文件路径: /examples/PDFViewCtrl/load-before-rendering/index.html

多实例

该示例展示了如何基于 PDFViewCtrl 在同一页面上创建多个 PDFViewer 实例。

源码文件路径: /examples/PDFViewCtrl/multiple-case/index.html

比较图像像素差异

该示例基于 React 开发,展示了如何使用接口计算和显示 PDF 页面的像素差异。

源码路径/examples/PDFViewCtrl/overlay-comparison/

备注

和其他示例不同,该示例需要自行编译才能运行,具体做法请参考 /examples/PDFViewCtrl/overlay-comparison/READMME.md

文本搜索

该示例展示了如何使用 PDFDoc.getTextSearch 接口搜索文本内容,并显示搜索结果。

源码路径: /examples/PDFViewCtrl/text-search/