Skip to content

示例

示例工程简介

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 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

这个示例展示了如何调用 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。请按照如下的步骤操作:

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

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

    yaml
    server {
      listen 8080;
      server_name 127.0.0.1;
    
      location / {
         alias "gotopath/FoxitPDFSDKForWeb/";
         charset utf8;
         index index.html;
      }
    }
  3. 重启 Nginx 服务,则您可以在浏览器中访问 webViewer。

    对于功能完整的 webViewer,请访问如下的地址:http://localhost:8080/examples/UIExtension/complete_webViewer/

    对于基础的 webViewer,请访问如下的地址:http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

TIP

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

  1. 安装 node.js 9.0 或以上版本,如果已经安装,请跳过此步。

  2. 在命令行中,导航到根目录 (FoxitPDFSDKForWeb)。

  3. 输入npm install 安装相关需要的依赖项。

  4. 输入npm run start-snapshot-server 开启 snapshot 服务 (默认端口是 3002)。

    WARNING

    如果您需要指定 snapshot 服务的端口,您可以在 Foxit PDF SDK for Web 包中的 server/snapshot/package.json文件中进行修改。找到默认端口 3002,然后根据您的 需要对其进行修改。

  5. 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;
      }
    }
  6. 重启 Nginx 服务,然后刷新您的浏览器,则 snapshot 功能就可以正常使用了。

使用 Nodejs 启动 Http 服务

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

  1. 下载 Foxit PDF SDK for Web 包并进行解压。在命令行中,导航到上述解压的目录,输入如下命令安装相关需要的依赖项:

    shell
    npm install
  2. 输入如下命令运行 web 服务:

    shell
    npm start
  3. 在浏览器中访问 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的脚本入口文件。有关详细信息,请查看源文件