# PDFViewer 多实例

# 概念解释

多实例：在同一个网页中，不通过 iframe 等手段，同时创建和管理多个独立的PDFViewer实例的能力。每个实例可以加载、显示和操作独立的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: "/assets/test-doc1.pdf",
        },
    },
    { fileName: "test-doc1.pdf" });
    viewer1.openPDFByHttpRangeRequest({
        range: {
            url: "/assets/test-doc2.pdf",
        },
    },
    { fileName: "test-doc2.pdf" });
</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 示例。

← PDF 文档比较自定义 StorageDriver →