# PDFViewer 多实例

# 概念解释

多实例: 在同一网页中创建和管理多个独立的 PDFViewer 实例的能力，无需使用 iframe 等方法。每个实例可以加载、显示和操作独立的 PDF 文档，而不会相互干扰。
PDFViewer: 是 Foxit PDF SDK for Web 的一个重要入口类。通过 Foxit PDF SDK for Web 渲染 PDF 文档，需要实例化这个类。

# 之前版本的限制

在 9.0.0 版本之前，仅支持创建和使用一个 PDFViewer 实例，这使得开发者无法同时加载和展示多个 PDF 文档（尽管可以借助 iframe 来实现，但 iframe 存在许多不足，因此不再推荐使用）。然而，在经历了一系列升级和改进后，从 9.0.0 版本开始，多实例功能得到了支持。

# 如何实现 PDFViewer 多实例

在实现多个 PDFViewer 实例之前，首先需要创建多个 DOM 实例，这是非常重要的一步。因为每个 PDFViewer 实例都需要在指定的 DOM 节点中进行渲染。下面是一个简化后的代码示例：

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

关于完整的代码示例，请参考 Full 包中的示例：examples/PDFViewCtrl/multiple-case。

以下是一个可运行的实例，请点击 run 按钮预览效果：

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

# 多实例的应用场景

在法律领域中同时查阅多个案件文件，或在学术研究中对比多个相关论文。可以参考 Full 包中的 /examples/PDFViewCtrl/overlay-comparison 示例。

← AnnotationAuthorityManager 自定义 StorageDriver →