Foxit Developer

Add-ons overview ​

Add-on list ​

Under /lib/uix-addons in the SDK package, Foxit PDF SDK for Web provides composable add-ons. The following lists supported add-ons. Each can be loaded alone or combined as needed.

txt
uix-addons
    ├── aria                    ----- 使组件支持 ARIA 标准
    ├── comparison              ----- 对比 PDF 文档
    ├── edit-graphics           ----- 编辑页面对象
    ├── export-form             ----- 导出表单功能
    ├── file-property           ----- 显示文档信息
    ├── form-designer           ----- 表单编辑功能
    ├── form-to-sheet           ----- 表单转换成工作表的功能
    ├── full-screen             ----- 全屏功能
    ├── h-continuous            ----- 水平连续页模式
    ├── h-facing                ----- 水平对开模式
    ├── h-single                ----- 水平单页模式
    ├── import-form             ----- 导入表单功能
    ├── javascript-form         ----- 添加、修改和测试文档中的 JavaScript
    ├── manage-comments         ----- 控制注释列表功能
    ├── multi-media             ----- 添加音频和视频注释功能
    ├── page-template           ----- 编辑页面模板功能
    ├── password-protect        ----- 密码保护
    ├── path-objects            ----- 编辑 path 页面对象
    ├── preview                 ----- 支持输出预览功能    
    ├── print                   ----- 打印 PDF 页面功能
    ├── range-input             ----- range-input 组件
    ├── read-aloud              ----- 朗读UI组件
    ├── recognition-form        ----- 表单域识别功能
    ├── redaction               ----- 密文功能
    ├── rotate-pages            ----- 旋转页面功能     
    ├── search                  ----- 文本搜索功能
    ├── text-object             ----- 编辑文本对象功能
    ├── thumbnail               ----- 缩略图侧边栏功能
    ├── undo-redo               ----- undo-redo 功能
    ├── xfa-form                ----- 编辑静态XFA表单功能 
    ├── dynamic-xfa             ----- 编辑动态XFA表单功能     
    ├── allInOne.js             ----- 包含以上所有的 Addon
    └── allInOne.mobile.js      ----- 包含以上只支持 mobile 的 Addon

Add-on dependencies ​

Shared functions are extracted into dependency add-ons to avoid duplicate registration when multiple add-ons need them.

text
edit-graphics
    ├── path-objects
    └── text-object

Loading path-objects or text-object also loads edit-graphics once.

Loading add-ons ​

Load add-ons individually ​

Load all available add-ons or only those you need.

Example:

html
<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        addons: [
            "path/to/customized-addon/addon.info.json",
            "path/to/lib/multi-media/addon.info.json"
        ],
    })
</script>

See /examples/UIExtension/complete_webViewer/index.html for loading add-ons individually.

Load add-ons as a bundle ​

Many HTTP requests can slow page load. Foxit PDF SDK for Web bundles add-ons in allInOne.js (desktop) and allInOne.mobile.js (mobile) . You can also use the merge add-ons tool to customize the bundle.

Add-on structure ​

Entry file — addon.info.json ​

addon.info.json is the add-on entry file: library name, i18n resources, and CSS.

Example:

json
{
  "library": "ExampleUIXAddon",
  "i18n": {
    "ns": "example",
    "sources": {
      "en-US": "./locales/en-US.json",
      "zh-CN": "./locales/zh-CN.json"
    }
  },
  "css": [
    "./index.css"
  ]
}

i18n resources ​

This entry configures localization. ns is the namespace; sources lists locale files. See I18n component usage.

After configuration, use [i18n-namespace]:[i18n-key] for localized strings.

In the example below, the namespace is example and keys may be toolbar.title, dialog.title, or buttons.addText (see zh-CN.json for more).

html
<h6>example:dialog.title</h6>

is rendered as

html
<h6>Dialog title</h6>

and

html
<h6>对话框标题 Dialog title</h6>

css field ​

This entry lists stylesheets (index.css is typical loader output). Only CSS is supported.

allInOne.js and allInOne.mobile.js ​

allInOne.js bundles all desktop add-ons; allInOne.mobile.js bundles mobile add-ons. Load them together to reduce requests. Mobile does not include form-designer or text-object.

Load allInOne.js and allInOne.mobile.js ​

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script src="path/to/allInOne.mobile.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        addons: UIXAddons, / UIXAddons is the library name in allInOne.js
    })
</script>

Load a filtered allInOne bundle ​

Default allInOne.js (desktop) and allInOne.mobile.js (mobile) merge all supported add-ons. Filter with UIXAddons(UIExtension).filter before passing to the viewer.

Example:

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    UIXAddons = UIXAddons(UIExtension).filter(addon => addon.getName() != 'editTextObject')
    var pdfui = new UIExtension.PDFUI({
        addons: UIXAddons,
    })
</script>

Merge add-ons ​

To merge add-ons yourself or rebuild allInOne.js / allInOne.mobile.js with a custom set, use the addon loader and gulp plugin:

See also /examples/UIExtension/use-merged-addon.