Section:

Edit Table of Contents in a PDF Showcase Demo Code Sample

Requirements
View Demo
Web SDK
Package: Page Manipulation
Full API

Create accessible navigation with document outlines or table of contents. Add new outlines or edit them.


This demo allows you to:

  • Upload your own PDF file.
  • Add or Edit Outlines or Table of Contents.
  • Save edits and download an updated PDF.

Implementation steps
To add Table of Contents or Outlines capability in WebViewer:

Step 1: Choose your preferred web stack.
Step 2: Add the ES6 JavaScript sample code provided in this guide.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

1// ES6 Compliant Syntax
2// Copilot name: GitHub Copilot, version: 1.0.0, model: GPT-4, version: 2024-06, date: 2025-10-23
3// File: showcase-demos/edit-table-of-contents/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9function initializeWebViewer() {
10  WebViewer(
11    {
12      path: '/lib',
13      initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/Report_2011.pdf',
14      enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
15      fullAPI: true, // Enable the full PDFNet API
16      licenseKey: licenseKey, // Replace with your license key
17    },
18    document.getElementById('viewer')
19  ).then((instance) => {
20
21    // Set the toolbar group to the Annotate tools
22    instance.UI.setToolbarGroup('toolbarGroup-Annotate');
23
24    instance.Core.documentViewer.addEventListener('documentLoaded', () => {
25      UIElements.pageNumber = 1;
26      
27      // Set default coordinates
28      setDefaultCoordinates(instance);
29
30      // Customize the webviewer left panel
31      UIElements.customizeUI(instance);
32    });
33
34    console.log('WebViewer loaded successfully.');
35  }).catch((error) => {
36    console.error('Failed to initialize WebViewer:', error);
37  });
38}
39
40// Function to get the iframe context of WebViewer
41const getIframeContext = () => {
42  return (
43    document.getElementById('viewer')?.getElementsByTagName('iframe')?.[0]?.contentWindow
44      .instance || window.WebViewer.getInstance()
45  );
46};
47
48// Function to add a new outline to the PDF document
49window.addOutline = (instance) => {
50  const iframe = getIframeContext();
51  const PDFNet = iframe.Core.PDFNet;
52
53  const documentViewer = iframe.Core.documentViewer;
54
55  return PDFNet.runWithCleanup(async () => {
56    const doc = await documentViewer.getDocument().getPDFDoc();
57    const newOutline = await PDFNet.Bookmark.create(doc, UIElements.outlineName);
58
59    const page = await doc.getPage(UIElements.pageNumber);
60
61    const zoom = 1;
62
63    const dest = await PDFNet.Destination.createXYZ(page, UIElements.xCoordinate, UIElements.yCoordinate, zoom);
64
65    newOutline.setAction(await PDFNet.Action.createGoto(dest));
66
67    await doc.addRootBookmark(newOutline);
68
69    instance.UI.reloadOutline();
70
71    instance.UI.setActiveTabInPanel({ tabPanel: UIElements.tabPanel.dataElement, tabName: 'outlinesPanel' });
72  });
73};
74
75// Helper function to set default coordinates based on the page size
76window.setDefaultCoordinates = (instance) => {
77  const doc = instance.Core.documentViewer.getDocument();
78  const pageInfo = doc.getPageInfo(UIElements.pageNumber);
79  UIElements.xCoordinate = 0;
80  UIElements.yCoordinate = pageInfo.height;
81}
82
83//helper function to load the ui-elements.js script
84function loadUIElementsScript() {
85  return new Promise((resolve, reject) => {
86    if (window.UIElements) {
87      console.log('UIElements already loaded');
88      resolve();
89      return;
90    }
91    const script = document.createElement('script');
92    script.src = '/showcase-demos/edit-table-of-contents/ui-elements.js';
93    script.onload = function () {
94      console.log('✅ UIElements script loaded successfully');
95      resolve();
96    };
97    script.onerror = function () {
98      console.error('Failed to load UIElements script');
99      reject(new Error('Failed to load ui-elements.js'));
100    };
101    document.head.appendChild(script);
102  });
103}
104
105// Load UIElements script first, then initialize WebViewer
106loadUIElementsScript().then(() => {
107  initializeWebViewer();
108}).catch((error) => {
109  console.error('Failed to load UIElements:', error);
110});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales