示例工程简介
UIExtension
功能完整的 webViewer
这是一个即用型应用程序,集成了 SDK 提供的所有功能,您可以直接运行或集成到您的项目中。此应用程序使用功能齐全的 UIExtension.full.js
库进行 PDF 视图和文档解析。
源码文件路径: /examples/UIExtension/complete_webViewer
。
集成示例
该示例引导您如何将 SDK 作为 es-module,amd 或者 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
。
设置数字图章的身份信息
该示例展示了如何使用 DigitalStampUIXAddon
的 setIdentityInfo
接口设置身份信息。
源码文件路径: /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
。
注释创建示例
该示例介绍如何继承 link
、screen
、和 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/
。