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。

# 异步/同步注释加载

该示例用来说明如何通过使用 '' 标签中的 '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的开源代码，用于进行自定义。

跳转到工程页面

# 自定义 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) →