Foxit PDF SDK For Web - V8.4.0

# Introduction to addons

In the /lib/uix-addons directory, Foxit PDF SDK for Web provides a set of rich addons that can be freely combined. The following structure lists the currently supported addons. Each addon can be loaded individually or in combination as needed.

uix-addons
    ├── aria                    ----- Make components support ARIA standards
    ├── edit-graphics           ----- Edit page objects
    ├── export-form             ----- Export form
    ├── file-property           ----- Used to display PDF file 
    ├── form-designer           ----- Provides form editing function
    ├── form-to-sheet           ----- Provides functionality for form-to-sheet conversion
    ├── full-screen             ----- Full screen
    ├── h-continuous            ----- Horizontal continuous page mode
    ├── h-facing                ----- Horizontal facing mode for the cover
    ├── h-single                ----- Horizontal single page mode
    ├── import-form             ----- Import form
    ├── javascript-form         ----- Add, modify and test JavaScript within the document
    ├── manage-comments         ----- Provides a series of functions to control the list of comments
    ├── multi-media             ----- Provides the function of adding audio and video annotations
    ├── page-template           ----- Provides the function of editing page templates
    ├── password-protect        ----- Password protection
    ├── path-objects            ----- Edit path objects
    ├── print                   ----- Print PDF pages function
    ├── range-input             ----- Provides range-input component.
    ├── read-aloud              ----- Read aloud UI components
    ├── recognition-form        ----- Form field recognition
    ├── redaction               ----- Redaction
    ├── search                  ----- Text search function
    ├── text-object             ----- Edit text objects
    ├── thumbnail               ----- Provides the function of thumbnail sidebar
    ├── undo-redo               ----- Undo and redo
    ├── xfa-form                ----- Provides the function of editing static XFA form
    ├── allInOne.js             ----- Collection of all add-ons
    └── allInOne.mobile.js      ----- Collection of all add-ons that support mobile

# Dependency Hierarchy

In order to avoid repeating registration and execution of the same functions in different addons, the functions will be extracted into separate addons, and then passively loaded as dependencies.

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

When the application loads path-objects or text-object, edit-graphics will also be loaded and only loaded once.

# Load Addons

# Load addons individually

You can load all available addons or a few specific addons individually.

Code Example:

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

The file /examples/UIExtension/complete_webViewer/index.html also provides an example to show how to load all addons individually.

# Load addons in combination

In the network environment, downloading too many addons would increase the HTTP requests. To minimize the number of HTTP requests, you may prefer loading all addons in a single file. We provide a script file allInOne.jswhich is a combination of all addons. Besides, you can use our merge addons tools to tailor addons.

# The addon's structure

# The entry file -- addon.info.json

The addon.info.json is the addon entry file, which includes the addon's library name, i18n sources and css files.

Example:

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

# The "i18n" sources

This item is used to configure localization. "ns" specifies namespace. "sources" specifies files.

After configuration, you can use [i18n-namespace]:[i18n-key] to implement localization.

In the case below, i18n namespace is "example", "i18n-key" could be "toolbar.title", "dialog.title" or "buttons.addText"(Refer to zh-CN.json for details).

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

will be translated to

<h6>Dialog title</h6>

and

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

# The "css" field

This item specifies style sheets("index.css" is the output of style-loader). Currently only CSS is supported.

# allInOne.js

The allInOne.js is a script file that contains all currently supported addons. It is provided for your convenience to load addons in a combination way. This file is only for PC. If you want it for mobile, you should rebuild it to cut out the feature editTextObject which is unavailable in mobile.

You have two methods to build a custom addons

  • Use our merge addons tools to merge desired addons, and output a new all-in-one addons' file.
  • Use the UIXAddons(UIExtension).filterto dynamically detach an addon from allInOne.js and load it. Check out Loading custom addInOne.js

# Load allInOne.js

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

# Loading custom addInOne.js

The default allInOne.js combines all currently supported addons into a single script. You can detach the unwanted addon by UIXAddons(UIExtension).filter and then load them to web viewer.

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

If you want to merge addons by yourself or rebuild allInOne.js to merge your selected addons, you can use our merge addon tools addon loader and gulp plugin. Check out the links below for details.

You can also refer to /examples/UIExtension/use-merged-addon for usage.

# Develop custom addons

The /examples/UIExtension/scaffoldDemo/ is a scaffold project that contains an open source addon example. You may refer to the /examples/UIExtension/scaffoldDemo/readme.md file in that directory to start developing your own addons.

← Customizing the UI →