# # 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` 示例。