Add an outline to PDFs using JavaScript

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: Page ManipulationLive demo

Make sure you have Full API enabled in WebViewer.

To add a new outline item in an existing document.

JavaScript (SDK v8.0+)

Webviewer(...).then(async instance => {
  const { documentViewer, PDFNet } = instance.Core;
  await PDFNet.initialize();

  documentViewer.addEventListener('documentLoaded', async () => {
    const doc = documentViewer.getDocument();
    const pdfDoc = await doc.getPDFDoc();

    // create outline and add it to the first page
    const myitem = await PDFNet.Bookmark.create(pdfDoc, 'My outline');
    await myitem.setAction(await PDFNet.Action.createGoto(await PDFNet.Destination.createFit(await pdfDoc.getPage(1))));
    await pdfDoc.addRootBookmark(myitem);

    // refresh document outline
    instance.UI.reloadOutline();
  });
});

JavaScript (SDK v6.0+)

Webviewer(...).then(async instance => {
  const { docViewer, PDFNet } = instance;
  await PDFNet.initialize();

  docViewer.on('documentLoaded', () => {
    const doc = docViewer.getDocument();
    const pdfDoc = await doc.getPDFDoc();

    // create outline and add it to the first page
    const myitem = await PDFNet.Bookmark.create(pdfDoc, 'My outline');
    await myitem.setAction(await PDFNet.Action.createGoto(await PDFNet.Destination.createFit(await pdfDoc.getPage(1))));
    await pdfDoc.addRootBookmark(myitem);

    // refresh document outline
    const bookmarks = await doc.getBookmarks();
    instance.updateOutlines(bookmarks);
  });
});