Foxit PDF SDK For Web - V9.1.0

# Understanding the Package Structure

# Package introduction

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 and advanced editor)

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 or advanced editor, choose the full package.

The package contains the following folder structure:

Folder Description
docs Contains API reference documents and Foxit PDF SDK for Web's developer guide.
examples A series of demos and examples of how to take advantage of all Foxit PDF SDK for Web features.
external Font resources (only In JR full package).
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.
adaptive.js A responsive design script to adapt the viewer to mobile devices
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.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.

# 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": "foxit-pdf-sdk-for-web",
    "version": "9.1.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": "^4.1.0",
        "http-proxy-middleware": "^0.19.1",
        "koa": "^2.7.0",
        "koa-body": "^4.0.4",
        "koa-body-parser": "^1.1.2",
        "koa-router": "^7.4.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",
        "koa-cors": "0.0.16",
        "koa-serve-list": "^1.0.1",
        "koa-static": "^5.0.0",
        "nodemon": "^2.0.6",
        "ws": "^7.3.1"
    },
    "dependencies": {
        "@types/hammerjs": "^2.0.36",
        "@types/jquery": "^3.3.29",
        "@types/i18next": "^11.9.3",
        "@babel/runtime": "^7.17.9",
        "@babel/runtime-corejs3": "^7.17.9",
        "@csstools/normalize.css": "^10.1.0",
        "art-template": "^4.13.0",
        "axios": "^0.21.1",
        "babel-polyfill": "^6.26.0",
        "bootstrap-datepicker": "^1.9.0",
        "core-js": "^3.22.2",
        "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",
        "flatpickr": "4.6.9",
        "hammerjs": "^2.0.8",
        "human-format": "^0.11.0",
        "i18next": "^11.4.0",
        "i18next-chained-backend": "^0.1.2",
        "i18next-localstorage-backend": "^1.1.4",
        "i18next-xhr-backend": "^1.5.1",
        "jquery": "^3.3.1",
        "jquery-contextmenu": "^2.7.1",
        "jszip": "^3.7.1",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "print-area": "^0.1.4",
        "punycode": "^2.1.1",
        "sortablejs": "~1.9.0",
        "whatwg-fetch": "^3.0.0",
        "xlsx": "^0.17.2",
        "fast-printf": "^1.6.9"
    },
    "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 →