Section:

Outline tree in documents

To navigate an outline tree and print its result.

JavaScript (v6.0+)

1WebViewer({ ... }, viewerElement).then(instance => {
2    const { docViewer } = instance;
3    docViewer.on('documentLoaded', () => {
4
5        const doc = docViewer.getDocument();
6        doc.getBookmarks().then((bookmarks) => {
7
8            const printOutlineTree = (item, level) => {
9                const indent = '   '.repeat(level);
10                const name = item.getName();
11                console.log(indent + name);
12                item.getChildren().map(b => printOutlineTree(b, level+1));
13            };
14
15            bookmarks.map((root) => {
16                printOutlineTree(root, 0);
17            });
18        });
19    });
20});

Related Links

About outline tree

A document may contain a document outline, allowing the user to navigate interactively from one part of the document to another. The outline consists of a tree-structured hierarchy of Outlines, which serve as a "visual table of contents" to display the document's structure to the user.

Each Outline has a title, a Page, and a scroll offset that specifies where an outline will take a user that clicks on the Outline. The typical action for a Outline is to move to another location in the current document — although there is an optional parameter to link to a URL instead.

Expand outlines by default

Pass autoExpandOutlines: true in the WebViewer constructor options.

JavaScript (v8.0+)

1Webviewer({
2    ...,
3    fullAPI: true,
4    autoExpandOutlines: true,
5}, viewerElement).then(instance => {
6    // ...
7});

Or, use this API to expand outlines.

JavaScript (v8.0+)

1instance.UI.OutlinesPanel.setDefaultOptions({
2    autoExpandOutlines: true,
3});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales