# Example Projects

# UIExtension

# Complete webViewer

It is a ready-to-go application that you can run directly or integrate into your project with full features provided by Foxit PDF SDK for Web. This application uses the full-featured package "UIExtension.full.js" for the PDF viewing and document parsing.

Source folder: /examples/UIExtension/complete_webViewer

# Integration Examples

These examples walk you through integrating Foxit PDF SDK for web as an es-module, amd or commonJS module. For a global variable integration sample, refer to the code on /examples/UIExtension/complete_webViewer/index.html

Source folder: /examples/UIExtension/integrate-as-module

# Customize Global Annotation Properties

Provide an example to show how to set default annotation properties by using either of the constructor option or the function.

Source folder: /examples/UIExtension/default_annot_config

# Customize Tooltips Example

Provide an example to show how to customize tooltips on sidebar and toolbar.

Source folder: /examples/UIExtension/tooltip

# Asynchronous/Synchronous annotation loading

This demo shows how the annotations in a PDF can be automatically loading in both options, async and synchronous by using the 'lazy' property on the '' tag to true or false.

Source folder: /examples/UIExtension/commentlist-loadmode

# Customize Text Selection

This demo provides an example to show how to create a custom controller for text selection.

Source folder: /examples/UIExtension/custom-text-selection-tool

# Customize Annotations Pop-up

The default behavior of double clicking an annotation in webViewer is to trigger the comment panel. This demo guides you how to change the default event by adding the pop-up layer and overwriting the onDoubleTap event.

Source folder: /examples/UIExtension/custom_annotations_popup

# Customize User Interface

Provide code examples to show how to customize user interface. One introduces a non-adaptive sample for PC browser, the other guides how to set up adaptivity for across browsers. webViewer detects the 'navigator.userAgent' in browser when initializing and determines the UI layout accordingly – PC or mobile.

Source folder: /examples/UIExtension/custom_appearance

# Customize Layout by Templates

Provide examples to show the built-in templates in UIExtension and the reference methods. This example is suitable for users who need to fine-tune the template.

Source folder: /examples/UIExtension/layout_templates

# Customize Components by Fragments

Provide examples to show how to modify components and set up components configuration by using fragments.

Source folder: /examples/UIExtension/fragment_usage

# Annotation Data Migration Example

Provide an example to show how to migrate annotations JSON data from v6 to v7 to avoid data lost.

Source folder: /examples/UIExtension/migrateAnnotData

# PWA Example

Provide an example to show how to implement a progressive web app

Source folder: /examples/UIExtension/pwa

# UI Widgets Examples

These are examples referenced by UIExtension.components.widget in API Reference. Each sample shows the usage of a component (including how to pass parameters, event binding, and so on).

Source folder: /examples/UIExtension/tutorials/widgets

# Addon Usage Examples

With this example, you will learn how to merge addons and reference the merged-add.js in your code.

Source folder: /examples/UIExtension/use-merged-addon

# Webpack Scaffold Project

This project provides an open-source code of UI addon for customization.

Go to Project Page

Annotation Tooltip refers to a floating box that appears when the user hovers the mouse over an annotation. This demo demonstrates how to customize the Annotation Tooltip with the AnnotTooltip parameter, including how to display content, specify the position of the floating box, and show or hide it.

Source folder: /examples/UIExtension/custom_annotations_tooltip/index.html

# Set the Identity Information for a Digital Stamp

This demo demonstrates how to set the identity information using the setIdentityInfo interface of the DigitalStampUIXAddon.

Source folder: /examples/UIExtension/custom-digital-identity

# Preset Custom Fonts

This demo demonstrates how to configure and load custom fonts, and ultimately reflect them in the opened document.

Source folder: /examples/UIExtension/custom-font/index.html

# Customize Area Measurement Tool

This demo demonstrates how to customize a StateHandler that can create measurement rectangle area tool.

Source folder: /examples/UIExtension/custom-measurement/index.js

# Customize Progress Bar

This demo demonstrates how to customize a progress bar which can update progress information before opening a document or after closing a document.

Source folder: /examples/UIExtension/custom-percentage-process/index.html

# Customize to Create Redact tool

This demo demonstrates how to customize a StateHandler to select text on the page and create a Redact based on the selected text rectangle box.

Source folder: /examples/UIExtension/custom-redaction/index.js

# Signature Process Example

This demo demonstrates the complete signature process, including loading preset images, drawing a signature image, signing, and verifying and so on.

Source folder: /examples/UIExtension/custom-signature-flow/index.js

# PDFViewCtrl

# Basic webViewer

It is a basic webViewer that demonstrates how to call Foxit PDF SDK for Web API to load a PDF document, and zoom in/out the document. This demo uses the "PDFViewCtrl.full.js" package in the "lib" folder.

Source folder: /examples/PDFViewCtrl/basic_webViewer

# Overwrite PDFPageRendering Example

Provide an example to show how to add a custom UI to the nodes of each PDF page by overwriting the PDFPageRendering class, such as a UI of adding a loading dynamic figure or a similar progress bar.

Source folder: /examples/PDFViewCtrl/override-rendering

# Preload Worker Example

Provide an example to show how to load the worker scripts of the JR engine in advance, to get performance benefit of reducing initializing time.

Source folder: /examples/PDFViewCtrl/preload-worker

# Asynchronous Loading Example

Provide an example to show how to async opening files from URL.

Source folder: /examples/PDFViewCtrl/url

# Offline Example

This example demonstrates how to register the "service-worker.js" found in the "examples/PDFViewCtrl/service-worker" folder to better cache the core dependency files "gsdk.js" and font files in a browser supported by the service worker, in order to speed up the reloading time or use the offline mode.

Source folder: /examples/PDFViewCtrl/service-worker

# Inline DIV Example

This example renders the simple UI of Foxit PDF SDK for Web to a div container with a specified size.

Source folder: /examples/PDFViewCtrl/div

# FileOpen Plugin Example

Provide an example for opening a fileOpen protection file.

Source folder: /examples/PDFViewCtrl/fileopen

# Page Layout Rewriting Example

This example shows how to create a single view page layout and navigate page by up and down arrow keys without scrolling feature. By this example, you will learn how to register and inherit IViewMode to implement your own layout and customize navigating page postures.

Source folder: /examples/PDFViewCtrl/view-mode

# Document Password Re-encryption Example

Provide an example to show how to open a document with password re-encryption. The password re-encryption node.js example can be found at ... \server\encrypt-password.

Source folder: /examples/PDFViewCtrl/encrypt-password

# Page Manipulation Example

Provide an example to show how to manipulate pages.

Source folder: /examples/PDFViewCtrl/ppo

# Form Widgets Adding Example

Provide an example for creating supported form widgets.

Source folder: /examples/PDFViewCtrl/add-form-fields

# Annotation Creating Example

Provide examples to show how to inherit a StateHandler class of link, screen and textMarkup annotation to implement the annotation creating class.

Source folder: /examples/PDFViewCtrl/create-annot

# License Validation Tool

Provide a tool for verifying license validation.

Source folder: /examples/PDFViewCtrl/check-license

Provide an example to show how to read the content of a PDF document for a screen reader.

Source folder: /examples/PDFViewCtrl/accessibility/read-content/index.html

# Customize PageCustomRender Example

This demo demonstrates how to control whether a page is rendered by customizing PageCustomRender, and how to insert custom content into the DOM node of the PDF page to be rendered.

Source folder: /examples/PDFViewCtrl/load-before-rendering/index.html

# Multiple instances

This demo demonstrates how to create multiple instances of PDFViewer on the same page based on PDFViewCtrl.

Source folder: /examples/PDFViewCtrl/multiple-case/index.html

# Compare image pixel differences

This demo is developed based on React, which demonstrates how to use APIs to calculate and display the pixel differences of PDF pages.

Source folder: /examples/PDFViewCtrl/overlay-comparison/

Note: Unlike other demos, this demo needs to be compiled by yourself before running. For specific instructions, please refer to </examples/PDFViewCtrl/overlay-comparison/READMME.md>

# Text search

This demo demonstrates how to use the PDFDoc.getTextSearch interface to search for text content and display search results.

Source folder: /examples/PDFViewCtrl/text-search/

# HTTP Server Configuration Examples

# Start Http Server using Nginx

Using Windows as an example, assume that Nginx (opens new window) was installed on your system already. When you have Nginx server running, you can directly modify the nginx.conf in the conf directory, here we directly modify the configuration file to make webViewer run. Please follows the steps below:

Download Foxit PDF SDK for Web package, unzip it to a folder.

Locate to the Nginx/conf folder, open the nginx.conf, add the following listening information:

server {
    listen 8080;
    server_name 127.0.0.1;

    location / {
        alias "gotopath/FoxitPDFSDKForWeb/";
        charset utf8;
        index index.html;
    }
}

Restart Nginx server, now you can access the webViewer at

Complete webViewer address: http://localhost:8080/examples/UIExtension/complete_webViewer/
Basic webViewer address: http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/

Note : You can run the webViewer according to the above configuration, but at that time the snapshot feature cannot work correctly. The snapshot cannot be cached to clipboard, so that you cannot paste it to the location as desired. Please follow the steps below to build the snapshot server:

Install node.js 9.0 or higher, if it is already installed, skip it.
In a command prompt, navigate to the root directory of Foxit PDF SDK for Web.
type npm install to install the required dependencies.
type npm run start-snapshot-server to start the snapshot server (the default port is 3002).

Note : If you want to specify the port for snapshot server as desired, you can change it in the server/snapshot/package.json file of Foxit PDF SDK for Web package. To find the default port 3002, and change it as you wish.

Configure Nginx reverse proxy in nginx.conf:

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

Restart Nginx server, and refresh your browser, the snapshot feature should work correctly.

# Start Http Server using Nodejs

Assume that Node.js (opens new window) 9.0 or higher is available on your system already. Then follow the steps below to run the webViewer:

Download Foxit PDF SDK for Web package, unzip it, navigate to the root folder and execute to install dependencies:
```
npm install  
```
Run the web server with the command below:
```
npm start
```
The webViewer can be assessed with the following address:
```
Complete webViewer address: http://localhost:8080/examples/UIExtension/complete_webViewer/
Basic webViewer address: http://localhost:8080/examples/PDFViewCtrl/basic_webViewer/
```
Note: Using this method, you do not need to configure the proxy, the snapshot feature can be used normally. If you want to specify the ports for http-server and snapshot server as desired, you can change the two ports in the package.json file of Foxit PDF SDK for Web package.

To change the port for http-server and snapshot server, find the default port 8080 and 3002 as below, and change it as you wish:
```
"serve": {
    "port": 8080, 
    "public": "/",
    "proxy": {
        "target": "http://127.0.0.1:3002",
        "changeOrigin": true
    }
}
```

← Integration Scaffold Demo →