Foxit Developer

Integrate the SDK ​

This guide walks you through building a basic PDF viewer and a full-featured PDF viewer with Foxit PDF SDK for Web.

Prerequisites ​

Create a new web project ​

  1. Create a project folder, for example D:/test_web.

  2. Copy the lib, server, and external folders (if you need font resources), plus package.json, from the SDK package into D:/test_web. To follow the license examples in this guide, also copy the examples folder (at minimum license-key.js).

  3. Copy a PDF into D:/test_web, such as the demo guide from the docs folder.

  4. Create index.html under D:/test_web. The folder should look like this:

    text
    test_web
     +-- lib          (copy from the SDK package)
     +-- server       (copy from the SDK package)
     +-- examples     (copy from the SDK package; at least license-key.js for trial license)
     +-- package.json (copy from the SDK package)
     +-- index.html

    Initial index.html:

    html
    
<html>
<head>
    <meta charset="utf-8">
    <style>
        .fv__ui-tab-nav li span {
            color: #636363;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }
    </style>
    <!-- ignore other unimportant code -->
</head>
<body>
</body>
</html>

    For a complete sample, see examples/PDFViewCtrl/basic_WebViewer in the SDK package.

Integrate the basic Viewer (PDFViewCtrl) ​

This section shows how to add a basic PDF viewer with PDFViewCtrl in the web project you created.

  1. Add /lib/PDFViewCtrl.css inside the HTML <head>:

    html
    
<link rel="stylesheet" type="text/css" href="./lib/PDFViewCtrl.css">

  2. Import PDFViewCtrl.full.js from lib:

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

  3. Add a <div> in <body> as the web viewer container:

    html
    
<div id="pdf-viewer"></div>

  4. Initialize PDFViewCtrl (pass license info via jr when creating the instance; if you already loaded PDFViewCtrl.full.js in step 2, add only the script below):

    html
    <script src="./examples/license-key.js"></script>
<script>
    var PDFViewer = PDFViewCtrl.PDFViewer;
    var pdfViewer = new PDFViewer({
        libPath: './lib', // the library path of Web SDK.
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey,
        }
    });
    pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")
</script>

Note

The trial package exports licenseSN and licenseKey from examples/license-key.js. Do not commit plain-text licenses to public repositories in production. To encrypt licenses on the server and pass them to the client, use server/license-protect and pass the protected value via jr.l. See Trial and licensing for details.

  1. Open a PDF document:

    javascript
    // modify the file path as your need.
fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
    response.arrayBuffer().then(function (buffer) {
        pdfViewer.openPDFByFile(buffer);
    })
})

When finished, refresh the browser. You now have a simple PDF viewer. Right-click anywhere on the page and use zoom in or zoom out to change magnification.

Complete index.html:

html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./lib/PDFViewCtrl.css">

    <!-- You can delete the following style because it doesn't work in this project -->
    <style>
        .fv__ui-tab-nav li span {
            color: #636363;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }
    </style>
    <!-- ignore other unimportant code -->
</head>
<body>
<div id="pdf-viewer"></div>
<script src="./examples/license-key.js"></script>
<script src="./lib/PDFViewCtrl.full.js"></script>
<script>
    var PDFViewer = PDFViewCtrl.PDFViewer;
    var pdfViewer = new PDFViewer({
        libPath: './lib', // the library path of Web SDK.
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey,
        }
    });
    pdfViewer.init('#pdf-viewer'); // the div (id="pdf-viewer")

    // modify the file path as your need.
    fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
        response.arrayBuffer().then(function (buffer) {
            pdfViewer.openPDFByFile(buffer);
        })
    })

</script>
</body>
</html>

Integrate the full-UI PDF viewer (UIExtension) ​

Building on the web project, this section integrates a full-featured PDF viewer with UIExtension.

  1. Add /lib/UIExtension.css inside the HTML <head>:

    html
    
<link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">

  2. Import UIExtension.full.js from lib:

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

  3. Add a <div> in <body> as the webViewer container:

    html
    
<div id="pdf-ui"></div>

  4. Initialize UIExtension (pass the same license configuration in viewerOptions.jr as for PDFViewCtrl; if you already loaded UIExtension.full.js in step 2, add only the script below):

    html
    <script src="./examples/license-key.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: './lib', // the library path of web sdk.
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui' // the div (id="pdf-ui").
    });
</script>

    Note

    Trial license sources and protected licenses via jr.l work the same as in the previous section. See Trial and licensing.

  5. Open a PDF document:

    javascript
    // modify the file path as your need.
fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
    response.arrayBuffer().then(function (buffer) {
        pdfui.openPDFByFile(buffer);
    })
})

    When finished, refresh the browser. You now have a full-featured PDF viewer for viewing, editing, annotating, and protecting PDFs.

    Complete index.html:

    html
    
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./lib/UIExtension.css">
    <style>
        .fv__ui-tab-nav li span {
            color: #636363;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }
    </style>
    <!-- ignore other unimportant code -->
</head>
<body>
<div id="pdf-ui"></div>
<script src="./examples/license-key.js"></script>
<script src="./lib/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: './lib', // the library path of web sdk.
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui' // the div (id="pdf-ui").
    });

    // modify the file path as your need.
    fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function (response) {
        response.arrayBuffer().then(function (buffer) {
            pdfui.openPDFByFile(buffer);
        })
    })

</script>
</body>
</html>

    For a complete sample, see examples/UIExtension/complete_WebViewer in the SDK package.

Integration options ​

Global variable integration ​

Load the SDK as global variables:

html
<script src="./examples/license-key.js"></script>
<script src="./lib/PDFViewCtrl.full.js"></script>
<script>
    var PDFViewer = PDFViewCtrl.PDFViewer;
    var pdfViewer = new PDFViewer({
        libPath: './lib',
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey
        }
    });
</script>

When using globals, still pass jr license fields in the constructor. See Trial and licensing for more.

Sample project: examples/UIExtension/complete_WebViewer in the SDK package.

Modular integration ​

Integrate the SDK as ES modules, AMD, or CommonJS. See examples/UIExtension/integrate-as-module/ in the SDK package.