# PDFViewer Multiple Instances

# Concept Explanation

Multiple Instances: The ability to create and manage multiple independent PDFViewer instances within the same web page without using iframes or similar methods. Each instance can load, display, and manipulate separate PDF documents without interfering with each other.
PDFViewer: It is an important entry class in the Foxit PDF SDK for Web. To render PDF documents using Foxit PDF SDK for Web, this class should be instantiated.

# Limitations in Previous Versions

Prior to version 9.0.0, only one instance of PDFViewer was supported for creation and usage, which restricted developers from simultaneously loading and displaying multiple PDF documents (although this could be achieved through iframes, iframes also have many disadvantages and are no longer recommended). After upgrading and improving, starting from version 9.0.0, multiple instances are supported.

# How to Implement PDFViewer Multiple Instances

To implement multiple PDFViewer instances, it is necessary to create multiple DOM instances beforehand. Each PDFViewer instance needs to be rendered within a specified DOM node. Here is a simplified code 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 eSelectPDFFile = eContainer.querySelector('[name=select-pdf-file]');
    var eRenderTo = eContainer.querySelector('.pdf-viewer');

    pdfViewer.init(eRenderTo);
    return pdfViewer;
}

For the complete code example, please refer to the example in the Full package: examples/PDFViewCtrl/multiple-case.

Here is a runnable example. Click the run button to preview the effect:

<html>
<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>
</html>
<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 eSelectPDFFile = eContainer.querySelector('[name=select-pdf-file]');
        var eRenderTo = eContainer.querySelector('.pdf-viewer');

        pdfViewer.init(eRenderTo);
        return pdfViewer;
    }
    var viewer1 = createPDFViewer('pdf-app-0');
    var viewer2 = createPDFViewer('pdf-app-1');
    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;
    }
    
    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>
<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.fv__pdf-view-mode-item {
        --facing-margin: auto;
        margin-top: 8px;
    }
</style>

# Application Scenarios for Multiple Instances

Simultaneously reviewing multiple case files in the legal field or comparing multiple related research papers in academic research. You can refer to the example /examples/PDFViewCtrl/overlay-comparison in the Full package.

← AnnotationAuthorityManager Customize StorageDriver →