Foxit PDF SDK For Web - V10.0.0

# 示例

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

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

该示例展示了如何使用 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，演示了如何调用 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 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/。

# HTTP 服务配置示例

# 使用 Nginx 启动 Http 服务

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

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

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

    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/

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

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

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

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

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


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

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

    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 (opens new window) 9.0 或者更高版本。请按照如下的步骤运行 webViewer：

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

    npm install

  2. 输入如下命令运行 web 服务：

    npm start

  3. 在浏览器中访问 webViewer。

    对于功能完整的 webViewer，请访问如下的地址： http://localhost:8080/examples/UIExtension/complete_webViewer/
对于基础的 webViewer，请访问如下的地址: http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

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


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

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

← 脚手架工程 (Scaffold Demo) →