PDFViewer 多实例

概念解释

PDFViewer 多实例功能包含以下核心概念:

• 多实例: 在同一网页中创建和管理多个独立的 PDFViewer 实例的能力,无需使用 iframe。每个实例可以加载、显示和操作独立的 PDF 文档,互不干扰。

• PDFViewer: Foxit PDF SDK for Web 的重要入口类。渲染 PDF 文档时需要实例化此类。

版本支持说明

版本要求

从 9.0.0 版本开始支持多实例功能。在此之前的版本仅支持单实例。

实现多实例

基础步骤

实现多实例的关键是为每个 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 eRenderTo = eContainer.querySelector('.pdf-viewer');
    pdfViewer.init(eRenderTo);
    return pdfViewer;
}

完整示例

可以在 Full 包的 examples/PDFViewCtrl/multiple-case 目录下查看完整示例代码。

运行示例

下面是一个完整的可运行实例:

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

    // 创建两个viewer实例
    var viewer1 = createPDFViewer('pdf-app-0');
    var viewer2 = createPDFViewer('pdf-app-1');

    // 加载不同的PDF文件
    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>

应用场景

PDFViewer 多实例功能适用于以下场景:

• 法律领域:同时查阅多个案件文件
• 学术研究:对比多个相关论文

示例参考

可以参考 Full 包中的 /examples/PDFViewCtrl/overlay-comparison 示例了解更多应用场景。