示例

示例工程简介

UIExtension

功能完整的 webViewer

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

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

集成示例

此示例演示如何将 Foxit PDF SDK for Web 作为 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

Webpack Scaffold 工程

该工程提供了 UI Addon 的开源代码，用于进行自定义。

Scaffold 工程页面

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

这个示例展示了如何调用 Foxit PDF SDK for Web 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 示例

该示例将 Foxit PDF SDK for Web 的简单 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 Widgets 添加示例

该示例介绍了如何创建支持的表单小部件。

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

注释创建示例

该示例演示了如何继承 Link、Screen 和 TextMarkup 注释的 StateHandler 类，以实现自定义的注释创建。

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

License 验证工具

这个示例提供了用于验证许可证的工具。

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

屏幕阅读器示例

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

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

自定义 PageCustomRender 示例

该示例展示了如何通过自定义 PageCustomRender 来控制页面的渲染，并将自定义内容插入待渲染的 PDF 页面的 DOM 节点中

多实例

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

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

比较图像像素差异

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

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

WARNING

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

文本搜索

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

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

HTTP 服务配置实例

使用 Nginx 启动 Http 服务

以 Windows 为例，假设您系统已经安装 Nginx。当您运行 Nginx 服务时，您可以直接修改 conf 目录下的nginx.conf。在本示例中，我们直接修改 nginx.conf 配置文件来运行 webViewer。请按照如下的步骤操作：

下载 Foxit PDF SDK for Web 压缩包，将其解压到某个文件夹下。

定位到 Nginx 的安装路径，打开 Nginx/conf 目录下的 nginx.conf 文件，添加如下的监听信息：

yaml

server {
  listen 8080;
  server_name 127.0.0.1;

  location / {
     alias "gotopath/FoxitPDFSDKForWeb/";
     charset utf8;
     index index.html;
  }
}

重启 Nginx 服务，则您可以在浏览器中访问 webViewer。
对于功能完整的 webViewer，请访问如下的地址：http://localhost:8080/examples/UIExtension/complete_webViewer/
对于基础的 webViewer，请访问如下的地址：http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

TIP

您可以按照如上的配置运行 webViewer，但是此时截图(snapshot)功能是不能正常使用的。snapshot 的图片不能被缓存到剪贴板，因此您不能根据需要将其粘贴到指定的位置。在这种情况下，请按照如下的步骤建立 snapshot 服务：

安装 node.js 9.0 或以上版本，如果已经安装，请跳过此步。
在命令行中，导航到根目录 (FoxitPDFSDKForWeb)。
输入npm install 安装相关需要的依赖项。
输入npm run start-snapshot-server 开启 snapshot 服务 (默认端口是 3002)。
WARNING
如果您需要指定 snapshot 服务的端口，您可以在 Foxit PDF SDK for Web 包中的 server/snapshot/package.json文件中进行修改。找到默认端口 3002，然后根据您的需要对其进行修改。

在 nginx.conf 文件中配置 Nginx 反向代理。

yaml

server {
  listen 8080;
  server_name 127.0.0.1;

  location / {
     alias "gotopath/FoxitPDFSDKForWeb/";
     charset utf8;
     index index.html;
  }

  location ~ ^/snapshot/(.+)$ {
     proxy_pass http://127.0.0.1:3002/snapshot/$1$is_args$args;
     proxy_redirect off;
     proxy_request_buffering on;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

重启 Nginx 服务，然后刷新您的浏览器，则 snapshot 功能就可以正常使用了。

使用 Nodejs 启动 Http 服务

假设您的系统已经安装 Node.js 9.0 或者更高版本。请按照如下的步骤运行 webViewer:

下载 Foxit PDF SDK for Web 包并进行解压。在命令行中，导航到上述解压的目录，输入如下命令安装相关需要的依赖项：
shell
```
npm install
```
1
输入如下命令运行 web 服务：
shell
```
npm start
```
1
在浏览器中访问 webViewer。
对于功能完整的 webViewer，请访问如下的地址：http://localhost:8080/examples/UIExtension/complete_webViewer/
对于基础的 webViewer，请访问如下的地址：http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

TIP

使用这种方法，您不需要配置代理，snapshot 功能就可以正常使用。如果您需要指定 http-server 和 snapshot 服务的端口，您可以在 Foxit PDF SDK for Web 包中的 package.json 文件中进行端口修改。

如下所示，可以根据实际需要将 http-server 及 snapshot server 的默认端口 8080 和 3002 修改成其它值:

json

{
  "serve": {
    "port": 8080,
    "public": "/",
    "proxy": {
      "target": "http://127.0.0.1:3002",
      "changeOrigin": true,
      "pathFilter": "/snapshot"
    }
  }
}

脚手架工程 (Scaffold Demo)

Scaffold Demo 包含了开源 UI 的 Addon，展示了如何自定义 UI 以及如何使用声明文件。该 Demo 位于 ./examples/UIExtension/scaffoldDemo 目录下。

如何运行 Demo

设置库

在 demo 根目录下执行命令 npm run setup。此命令执行以下步骤：

将 lib 目录作为本地 npm 仓库添加到依赖列表。
安装所有第三方依赖，这些依赖主要用于开发环境搭建。

运行 Demo

执行命令：npm start

源码结构

src文件夹包含如下内容：

text

│addons.js                  ---展示如何使用foxit提供的插件。
│index.js                   ---javascript入口文件。
│
└─addonExample              ---addon的样例。
    │ addon.info.json       ---addon入口文件, 该文件指定了所有addon需要的其他文件。
    │ index.css             ---样式表。
    │ index.js              ---addon脚本入口文件。不能更改文件名。
    │
    ├─locales               ---i18n多语言文件。
    │   en-US.json
    │   zh-CN.json
    │
    ├─stateHandlers         ---继承自IStateHandler的State Handler 类。
    │   addTextField.js
    │
    └─templates
        custom-dialog.art   ---自定义对话框的art 模板。
        tab-template.art    ---自定义工具栏的art模板。

入口文件

src/addonExample/index.js 是addon的脚本入口文件。有关详细信息，请查看源文件。

示例 ​

示例工程简介 ​

UIExtension ​

功能完整的 webViewer ​

集成示例 ​

自定义全局注释属性 ​

自定义工具提示示例 ​

异步/同步注释加载 ​

自定义文本选择 ​

自定义注释弹出窗口 ​

自定义 UI ​

通过模板自定义布局 ​

通过 Fragments 自定义组件 ​

注释数据迁移示例 ​

PWA 示例 ​

UI Widgets 示例 ​

Addon 使用示例 ​

Webpack Scaffold 工程 ​

自定义 Annotation Tooltip 示例 ​

设置数字图章的身份信息 ​

预设自定义字体 ​

自定义面积测量工具 ​

自定义进度条 ​

自定义创建 Redact 工具 ​

签名流程 ​

PDFViewCtrl ​

基础 WebViewer ​

重写 PDFPageRendering 类示例 ​

预加载 Worker 示例 ​

异步加载示例 ​

离线示例 ​

内嵌 DIV 示例 ​

FileOpen 插件示例 ​

页面布局重写示例 ​

文档密码重新加密示例 ​

页面操作示例 ​

Form Widgets 添加示例 ​

注释创建示例 ​

License 验证工具 ​

屏幕阅读器示例 ​

自定义 PageCustomRender 示例 ​

多实例 ​

比较图像像素差异 ​

文本搜索 ​

HTTP 服务配置实例 ​

使用 Nginx 启动 Http 服务 ​

使用 Nodejs 启动 Http 服务 ​

脚手架工程 (Scaffold Demo) ​

如何运行 Demo ​

设置库 ​

运行 Demo ​

源码结构 ​

入口文件 ​

示例