PDFViewer Multiple Instances

Concepts

PDFViewer multiple-instance support includes:

• Multiple instances: Create and manage several independent PDFViewer instances on one page without iframes. Each instance can load, display, and manipulate its own PDF document independently.

• PDFViewer: The main entry class in Foxit PDF SDK for Web. Instantiate it to render PDF documents.

Version support

Version requirement

Multiple instances are supported from version 9.0.0. Earlier versions support only a single instance.

Implementing multiple instances

Basic steps

Provide a separate DOM node for each PDFViewer instance. Basic example:

var PDFViewer = PDFViewCtrl.PDFViewer;

function createPDFViewer(containerId) {
    var eContainer = document.getElementById(containerId);
    var pdfViewer = new PDFViewer({
        libPath: '../../../lib',
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey,
        },
        customs: {
            ScrollWrap: PDFViewCtrl.CustomScrollWrap
        }
    });

    var eRenderTo = eContainer.querySelector('.pdf-viewer');
    pdfViewer.init(eRenderTo);
    return pdfViewer;
}

Full example

See the complete sample in the Full package under examples/PDFViewCtrl/multiple-case.

Runnable example

<div class="foxit-web-pdf-app" id="pdf-app-0">
    <div class="pdf-viewer-container">
        <div class="pdf-viewer"></div>
    </div>
</div>
<div class="foxit-web-pdf-app" id="pdf-app-1">
    <div class="pdf-viewer-container">
        <div class="pdf-viewer"></div>
    </div>
</div>

<style>
    body {
        display: flex;
        overflow: hidden;
        flex-direction: row;
    }

    .foxit-web-pdf-app {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100vh;
        min-width: 50vw;
        border-right: 1px solid #ddd;
        box-sizing: border-box;
        position: relative;
    }

    .pdf-viewer-container {
        flex: 1;
        overflow: scroll;
        min-width: 0;
    }

    .fv__viewer-single-view-mode .fv__pdf-view-mode-item {
        --facing-margin: 0;
    }

    .continuous-view-mode .fv__pdf-view-mode-item.fv__pdf-view-mode-item {
        --facing-margin: auto;
        margin-top: 8px;
    }
</style>

<script>
    const libPath = window.top.location.origin + '/lib';
    var PDFViewer = PDFViewCtrl.PDFViewer;

    function createPDFViewer(containerId) {
        var eContainer = document.getElementById(containerId);
        var pdfViewer = new PDFViewer({
            libPath: libPath,
            jr: {
                fontPath: 'http://webpdf.foxitsoftware.com/webfonts',
                licenseSN: licenseSN,
                licenseKey: licenseKey,
            },
            customs: {
                ScrollWrap: PDFViewCtrl.CustomScrollWrap
            }
        });

        var eRenderTo = eContainer.querySelector('.pdf-viewer');
        pdfViewer.init(eRenderTo);
        return pdfViewer;
    }

    / Create two viewer instances
    var viewer1 = createPDFViewer('pdf-app-0');
    var viewer2 = createPDFViewer('pdf-app-1');

    / Load different PDF files
    viewer1.openPDFByHttpRangeRequest({
        range: {
            url: getAssetPath("/assets/1-feature-example_default-setup.pdf"),
        },
    }, {fileName: "1-feature-example_default-setup.pdf"});

    viewer2.openPDFByHttpRangeRequest({
        range: {
            url: getAssetPath("/assets/PDFViewer_Multiple_Instances.pdf"),
        },
    }, {fileName: "PDFViewer_Multiple_Instances.pdf"});

    function getAssetPath(filePath) {
        var pathname = window.top.location.pathname;
        if (pathname.indexOf('/docs/developer-guide') === 0) {
            return ('/docs/developer-guide/' + filePath).replace('/', '/');
        }
        return filePath;
    }
</script>

Use cases

Multiple PDFViewer instances are useful when you need to:

• Review several case files side by side (legal)
• Compare multiple related papers (academic research)

More examples

See /examples/PDFViewCtrl/overlay-comparison in the Full package for additional scenarios.