福昕开发者文档中心

PDF 书签 API ​

基于 PDFViewCtrl 层和 UIExtension 层之间的差异，SDK 将书签 API 分为两部分，并提供了两个 Service 实例：

  1. [BookmarkDataService][bookmark-data-service-link]: PDFViewCtrl 层的书签数据服务。当您的应用程序是基于 PDFViewCtrl 开发时，只能使用此服务提供的 API 进行扩展。

  2. [BookmarkUIService][bookmark-ui-service-link]: 基于 BookmarkDataService 封装的 UIExtension 层 API，它封装了BookmarkDataService 的部分 API，用于支持 UI 层的视图和数据同步以及支持 undo-redo 功能。

提示：点击 这里, 了解自定义书签 UI 组件。

以下是代码示例：

示例 1 ​

该示例展示如何通过 BookmarkDataService 获取和打印文档的一级书签：

html

<html>
<label>Select a PDF file with bookmarks:
    <input type="file" id="file">
</label>
<hr style="width: 100%;">
<div id="pdf-viewer"></div>
</html>
<script>
    const libPath = window.top.location.origin + '/lib';
    const ePDFViewer = document.getElementById('pdf-viewer');
    const pdfViewer = new PDFViewCtrl.PDFViewer({
        libPath: libPath,
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey
        },
        customs: {
            ScrollWrap: PDFViewCtrl.DivScrollWrap.create(ePDFViewer)
        }
    });
    pdfViewer.init(ePDFViewer);
    document.getElementById('file').onchange = function (e) {
        if (!this.value) {
            return;
        }
        pdfViewer.openPDFByFile(e.target.files[0]);
        this.value = '';
    };
    pdfViewer.eventEmitter.on(PDFViewCtrl.ViewerEvents.openFileSuccess, () => {
        const bookmarkDataService = pdfViewer.getBookmarkDataService();
        bookmarkDataService.getFirstLevelBookmarks().then(firstLevelBookmarks => {
            console.log(firstLevelBookmarks);
        });
    })
</script>
<style>
    body {
        display: flex;
        flex-direction: column;
    }

    #pdf-viewer {
        width: 100%;
        flex: 1;
        overflow: auto;
    }
</style>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

示例 2 ​

该示例展示如何通过 BookmarkUIService 创建和删除书签：

html

<html>
<div id="pdf-ui"></div>
<template id="custom-toolbar-template">
    <div class="custom-toolbar" @var.toolbar="$component">
        <xbutton @on.click="toolbar.addBookmark()">Create</xbutton>
        <xbutton @on.click="toolbar.deleteSelectedBookmark()">Delete</xbutton>
    </div>
</template>
</html>
<style>
    html {
        overflow: hidden;
    }

    body {
        height: 100vh;

    }

    #pdf-ui {
        position: relative;
        top: 50px;
    }

    .custom-toolbar {
        display: flex;
        gap: 10px;
        border-bottom: 1px solid #f0f0f0;
        padding: 5px 0;
    }
</style>
<script>
    const customBookmarkContextmenuTemplate = document.getElementById('custom-toolbar-template').innerHTML;

    class CustomBookmarkToolbarComponent extends UIExtension.SeniorComponentFactory.createSuperClass({
        template: customBookmarkContextmenuTemplate
    }) {
        static getName() {
            return 'custom-bookmark-toolbar';
        }

        addBookmark() {
            const service = this.getPDFUI().getBookmarkUIService();
            const text = prompt("Create new bookmark", "Untitled");
            service.addBookmark({
                title: text,
                relationship: PDF.bookmark.BookmarkRelationship.LAST_CHILD
            })
        }

        deleteSelectedBookmark() {
            const service = this.getPDFUI().getBookmarkUIService();
            const bookmarkId = service.getCurrentActiveBookmarkId();
            if (bookmarkId === undefined) {
                alert('You did not select a bookmark');
                return;
            }
            const confirmed = confirm('Are you sure you want to delete this bookmark? ')
            if (confirmed) {
                service.deleteBookmark(bookmarkId)
            }
        }
    }

    const customModule = UIExtension.modular.module('custom', []);
    customModule.registerComponent(CustomBookmarkToolbarComponent);

    const CustomAppearance = UIExtension.appearances.adaptive.extend({
        getDefaultFragments() {
            return [{
                target: 'sidebar-bookmark-v2',
                action: UIExtension.UIConsts.FRAGMENT_ACTION.PREPEND,
                template: `<custom:custom-bookmark-toolbar></custom:custom-bookmark-toolbar>`
            }];
        }
    });
    const libPath = window.top.location.origin + '/lib';
    const pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: '#pdf-ui',
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

bookmark-data-service-link

bookmark-ui-service-link