Foxit PDF SDK For Web - V10.0.0

# Understanding the Package Structure

# Package introduction

Before version 10.0, Foxit PDF SDK for Web provides three packages as follows:

  • Light package: FoxitPDFSDKForWeb_9_XXX_NoFonts.zip (excludes font resources)
  • Standard package: FoxitPDFSDKForWeb_9_XXX.zip (includes font resources)
  • Full package: FoxitPDFSDKForWeb_9_XXX_Full.zip (includes font resources, document comparison, advanced editor and dynamic XFA)

If you already have the font resources or only want to use online fonts, you can choose the light package if you don't want to make any changes to the font library and don't care about the size of the package, choose the standard package. If you want some advanced features, such as document comparison, advanced editor or dynamic XFA, choose the full package.

Starting from version 10.0, Foxit PDF SDK for Web only provides a full package, with separate authorized features loaded according to the license, and adds 3D feature.

  • Full package: FoxitPDFSDKForWeb_10_XXX.zip

The package contains the following folder structure:

Folder Description
docs Contains API reference documents and Foxit PDF SDK for Web's developer guide.
Note: Our HTML developer guide is built using VuePress, which does not support double-click to open directly. It requires starting an HTTP server and accessing it through a web browser. Additionally, it includes some runnable examples that need WebPDFJRWorker.js enabled which must run in an environment that supports an HTTP server to function correctly.
examples A series of demos and examples of how to take advantage of all Foxit PDF SDK for Web features.
external Font resources.
lib Foxit PDF SDK for Web core libraries.
server http-server and the Node.js scripts for a series of server-based utility applications to use in the viewer.
legal.txt Legal and copyright information.
package.json Project description file.

The lib folder's file structure is provided as follows:

Folder/File Description
jr-engine Front-end rendering engine.
locales Internationalized entries data for using the viewer in different languages. Every language is placed in a different directory with its own label.
PDFViewCtrl Plugins for the PDFViewCtrl library.
stamps Stamps resources, image files and templates.
assets Contains the template resource files needed by the document comparison function, currently only included in the full package.
uix-addons All plugins for the UIExtensions project.
PDFViewCtrl.css CSS file for the PDFViewCtrl viewer UI style.
PDFViewCtrl.full.js Complete script file for the PDFViewCtrl viewer library.
PDFViewCtrl.js Script file for the PDFViewCtrl viewer library without third-party libraries.
PDFViewCtrl.polyfills.js Browser-adapted polyfill script file for the PDFViewCtrl viewer library.
PDFViewCtrl.vendor.js Third-party libraries script used by PDFViewCtrl (See the lists later).
preload-jr-worker.js Worker script for loading resources of JS engine in parallel to the UI for improving the viewer loading speed.
UIExtension.css The default CSS file of the UI.
UIExtension.dark-variable.css The style file for dark theme.
UIExtension.vw.css The CSS file using vmin unit.
UIExtension.full.js Complete script file for the UIExtension full-featured viewer library.
UIExtension.js Script file for the UIExtension viewer library without third-party libraries
UIExtension.polyfills.js Browser-adapted polyfill script file for the UIExtensions viewer library.
UIExtension.vendor.js Third-party libraries script used by UIExtension (See the lists later).
WebPDFJRWorker.js Script files running in the Web Worker, which are used for calling the front-end rendering engine.
WebPDFSRWorker.js Script files running in the Web Worker, which are used for calling the server rendering engine.
*.d.ts "*.d.ts" files are used to provide TypeScript (version 3.3 or higher) with type information about APIs written in JavaScript. The purpose is to enable IDEs to recognize it and provide us with code hints, as well as perform static type checking during compilation, providing convenience while ensuring the accuracy of calling APIs.

# Basic Features and Separately Authorized Features

Basic Features:

  • View
  • Bookmark
  • Annotation
  • Form
  • Security
  • Signature

Separately Authorized Features:

  • Redact
  • Advanced Edit (Adv Edit)
  • Compare
  • Dynamic XFA
  • 3D

# Static Library and Dynamic Library

Before version 10.0, the underlying library used in Foxit PDF SDK for Web is a static library. From version 10.0, the underlying library used in Foxit PDF SDK for Web is a dynamic library.

# Division of Dynamic Library Modules

From version 10.0, the dynamic library modules are divided into main module and side module.

Main module:

  • gsdk.wasm

Side module: (Lazy loading)

  • compare.wasm
  • pageeditor.wasm
  • touchup.wasm
  • xfa.wasm
  • 3d.wasm
  • lr.wasm
  • Pageformat.wasm
  • docprocess.wasm
Module Name Functionality Dependencies
gsdk.wasm Wrappers features authorized by the Standard license and Redact. pageformat.wasm
lr.wasm
docprocess.wasm
compare.wasm The Overlay Compare feature, authorized by the Compare license. lr.wasm
pageeditor.wasm The Paragraph-based editor (Advanced Editor), authorized by the AdvEditor license. lr.wasm
touchup.wasm The EditText and AddText of Advanced editor, authorized by the AdvEditor license. lr.wasm
xfa.wasm The dynamic XFA form, authorized by the XFA license. lr.wasm
3d.wasm The PDF 3D feature, authorized by the 3D license. none
lr.wasm The Layout Recognition engine module provides fundamental support for high-level features. It gets loaded when the related modules depending upon are triggered. none
Pageformat.wasm This module gets loaded when the main module is triggered. It provides fundamental codes for the Header&Footer and Watermark features. none
docprocess.wasm This module gets loaded when the main module is triggered. It provides fundamental codes for processing article box and web links on the text. none

# Package.json

Foxit PDF SDK for Web provides a package.json file to help developers quickly deploy and use the SDK, and make it easy to integrate into their project. The content is as follows:

{
    "name": "@foxitsoftware/foxit-pdf-sdk-for-web-library",
    "version": "10.0.0",
    "description": "Foxit pdf sdk for web.",
    "author": "Foxit Software Inc.",
    "main": "./lib/UIExtension.full.js",
    "types": "./lib/UIExtension.full.d.ts",
    "typings": "./lib/UIExtension.full.d.ts",
    "scripts": {
        "start": "concurrently --kill-others \"npm run start-http-server\" \"npm run start-snapshot-server\"",
        "start-snapshot-server": "node ./server/snapshot/src/index -p 3002",
        "start-http-server": "node ./server/index"
    },
    "license": "Commercial",
    "devDependencies": {
        "boxen": "^4.1.0",
        "chalk": "^2.4.1",
        "concurrently": "^8.2.2",
        "http-proxy-middleware": "^3.0.0",
        "koa": "^2.7.0",
        "koa-body": "^4.0.4",
        "koa-body-parser": "^1.1.2",
        "koa-cors": "0.0.16",
        "koa-router": "^7.4.0",
        "koa-serve-list": "^1.0.1",
        "koa-static": "^5.0.0",
        "koa2-connect": "^1.0.2",
        "lru-cache": "^4.1.3",
        "raw-body": "^2.3.3",
        "require-dir": "^1.0.0",
        "serve-handler": "^6.0.2",
        "sockjs": "^0.3.21",
        "ws": "^7.3.1"
    },
    "dependencies": {
        "@csstools/normalize.css": "^10.1.0",
        "@types/hammerjs": "^2.0.36",
        "@types/jquery": "^3.3.29",
        "bootstrap-datepicker": "^1.9.0",
        "core-js": "3.35.1",
        "dayjs": "^1.11.1",
        "dayjs-plugin-utc": "^0.1.2",
        "dialog-polyfill": "^0.4.10",
        "dom4": "^2.1.4",
        "es6-promise": "^4.2.5",
        "eventemitter3": "^3.1.0",
        "fast-printf": "^1.6.9",
        "flatpickr": "4.6.9",
        "hammerjs": "^2.0.8",
        "human-format": "^0.11.0",
        "i18next": "^23.8.1",
        "i18next-chained-backend": "^4.6.2",
        "i18next-localstorage-backend": "^4.2.0",
        "i18next-xhr-backend": "^3.2.2",
        "jquery": "^3.4.1",
        "jquery-contextmenu": "^2.7.1",
        "jszip": "^3.7.1",
        "lodash": "^4.17.21",
        "papaparse": "^5.4.1",
        "print-area": "^0.1.4",
        "punycode": "^2.1.1",
        "sortablejs": "~1.9.0",
        "whatwg-fetch": "^3.0.0"
    },
    "resolutions": {
        "jquery": "^3.4.1",
        "core-js": "3.35.1",
        "qs": ">=6.0.4"
    },
    "overrides": {
        "jquery": "^3.4.1",
        "core-js": "3.35.1",
        "qs": ">=6.0.4"
    },
    "serve": {
        "port": 8080,
        "public": "/",
        "proxy": {
            "target": "http://127.0.0.1:3002",
            "changeOrigin": true
        }
    },
    "files": [
        "lib",
        "server",
        "legal.txt",
        "locales_changelog.txt",
        "MigrationNode.txt",
        "ReleaseNote.txt"
    ]
}

# The third-party libraries used in Foxit PDF SDK for Web

Foxit PDF SDK for Web provides its script files in two versions: the full version script, that includes the third-party libraries, and the regular script, without any third-party libraries. If your project already uses the dependencies included in the SDK's third-party libraries, you don't need to re-install them.

The PDFViewCtrl.full.js script contains:

  • PDFViewCtrl.full.js: Complete script file for the PDFViewCtrl viewer library.
  • PDFViewCtrl.polyfills.js: Browser-adapted polyfill script file for the PDFViewCtrl viewer library.
  • PDFViewCtrl.vendor.js: Third-party libraries script used by PDFViewCtrl (See the list of vendors below this section).
  • PDFViewCtrl.js: Script file for the PDFViewCtrl viewer library without third-party libraries.

So, PDFViewCtrl.polyfills.js + PDFViewCtrl.vendor.js + PDFViewCtrl.js = PDFViewCtrl.full.js.

Essentially, the two scripts below are the same thing:

<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script>

and

<script src="../FoxitPDFSDKForWeb/lib/ PDFViewCtrl.polyfills.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.vendor.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.js"></script>

The third-party libraries contained in PDFViewCtrl.vendor.js are outlined below:

jquery
i18next
i18next-chained-backend
i18next-localstorage-backend 
i18next-xhr-backend
jquery-contextmenu
dialog-polyfill
hammerjs
eventemitter3

The UIExtension.full.js script contains:

  • UIExtension.full.js: Complete script file for the UIExtension viewer library.
  • UIExtension.polyfills.js: Browser-adapted polyfill script file for the UIExtension viewer library.
  • UIExtension.vendor.js: Third-party libraries script used by UIExtension (See the list of vendors below this section).
  • UIExtension.js: Script file for the UIExtension viewer library without third-party libraries.

So, UIExtension.polyfills.js + UIExtension.vendor.js + UIExtension.js = UIExtension.full.js.

Essentially, the two scripts below are the same thing:

<script src="../FoxitPDFSDKForWeb/lib/UIExtension.full.js"></script>

and

<script src="../FoxitPDFSDKForWeb/lib/UIExtension.polyfills.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/UIExtension.vendor.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/UIExtension.js"></script>

The third-party libraries contained in UIExtension.vendor.js are outlined below:

jquery
i18next
i18next-chained-backend
i18next-localstorage-backend
i18next-xhr-backend
dialog-polyfill
hammerjs
eventemitter3
file-saver

Quickly Run Examples →