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
Edit Table of Contents or Outlines in PDFs Showcase Demo | Apryse documentation